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.