How to center elements when in mobile view?


#1

Hi,

I have a row on our website home page that consists of 3 blocks (screenshot 1). The 2nd and 3rd blocks are being used for bullet point lists made up of little icons for the bullets, followed by lines of text. The 1st block is empty and is there to push the 2nd and 3rd along so that the bullet lists appear centered on desktop, which they do (screenshot 2).

However when viewing this row in mobile, the bullet lists are pushed over to the right and appear off center (screenshot 3). This is presumably due to the 1st empty block pushing the 2nd and 3rd over.

Is there a way to hide/remove this 1st empty block when in mobile view, a piece of code we could add? Or is there any other way we could get the bullet lists to shift into the center somehow?

I have tried changing the collapse order, alignments, mobile padding etc. in each block but no luck.

Hopefully the screenshots are clear enough. I had to combine them as I can only upload one image as a new user here.

Many thanks.


#2

Hello there,

Did you apply mobile padding on each widget’s settings?

The easiest solution probably a couple of lines of CSS code. To help me getting the exact code, please share a link to that page.

Regards,
Kharis


#3

Hi Kharis,

Thanks for your response. Adding mobile padding to each individual bullet point and line of text did solve it!

Thanks.


#4

Great! Glad to hear you found the solution yourself. Good job!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis


#5