Persistent problem with image spacing in mobile view

Hi! I’m having a problem with spacing images in mobile (SM) view. Here you can see how I design the pages in Blocs Dropbox - strangergames site design in blocs.png - Simplify your life - I give each image a padding of 4 on top and bottom.

When I preview the mobile page (SM) in Blocs it shows the images with the same spacing.

However, on mobile view online there is no space btw the images. Dropbox - strangergames on mobile view.png - Simplify your life

Any help greatly appreciated!

Oops - sorry, I meant I put a top and bottom margin of 4 on each image, not padding.

Hi:

Are you using the “Visibility” icons to set up your page for different devices?

Rich the Weather Guy

Yes, I am. They’re all selected. And then I double check and go to the SM view and it still looks fine there and in preview mode, but when published there are no margins at all. Is there a more reliable way to space images other than what I’m doing?

Something must overwrite your CSS. Please have a look in the browser inspector to see what’s going on or share a live link for further assistance.

Hi Jerry, sorry I don’t know what a “live link” is? (I’m a beginner werbdesigner myself, I’ve only ever made a site for myself). The site I’m referring to is strangergames.com, and all of the WORKS pages (those linked in the homepage) when seen on my iphone have the same non-spaced images.

The link you provided! You’re a quick learner! :grin:

You have not set any padding for MD and XS (Mobile) breakpoints. Your images have only classes for LG and SM breakpoints, as you can see, applied. You just add them the same way as you did for LG and SM and you’re good to go.

Thanks, Jerry! Just to make sure, in Blocs there’s no way to set margins universally on images is there? I have to go on XS and click on each one, and then on MD and click and adjust each?

As Bootstrap is Mobile First and when applying your own class to each image you should set margins/padding on the smallest breakpoint, and it will duplicate itself for the larger breakpoints. I’m not sure if the same applies by using spacing in the side-panel menu.

Solved! Much appreciated, Jerry! Just one more question for you, if you don’t mind.


One very odd thing is the centering of my name in the header on mobile. Here you can see it’s centered in XS but then on the live link it is always off center.

I’d probably just go through your classes applied to this item and make sure that any paddings/margins/ alignments are all set correctly to start with at this breakpoint.
I’ve done it myself - very easy to miss something.

Hmm, I really can’t make sense of why it isn’t centered in sm view…