Unwanted spacers between content blocks on a mobile devices

CodyP

Hey all,

I've seen this question has been asked in slightly different ways, so I've made a new topic.

My intent for the homepage of website ( pieperphotography.com ) is to have my desired layout manually set with 'Single Photo' content blocks as in the first screenshot to have:
•No spacing between photos
•Full-width landscape photos
•Half width portrait photos

If you see my homepage at the link above, it is currently functioning how I would like it on desktop. However, when viewed on a mobile, or a browser with a lower horizontal pixel count, there is what appears to be a blanket spacing between each content block and therefore between individual photos, as I'm using 'Single Photo' content blocks.

I'm unfamiliar with CSS, could anyone assist me with recommendations to remove these spaces?

Thank you in advance for any help!

Cody

Hikin' Mike

Add a CSS block in your Home Page and add this:

@media only screen and ( max-width: 736px ) {

  .sm-user-ui .sm-page-widget .sm-page-widget-content {
    padding: 0 !important;
  }

}

Make sure the CSS block is above your content (photos).

CodyP

That's worked perfectly Mike,

I had pasted in a similar line of CSS, but I must have missed the part about adding a CSS block above the photos, and was adding it as part of the theme I believe.

Thank you very much for your help! Now time to go study up on CSS :)

Hikin' Mike

I personally put my CSS on my theme's custom CSS section, but in your case putting it only on the home page makes sense. When you use a CSS block, it works better if you add it first. Kind of like reading a book.

CodyP

That makes a lot of sense, cheers for the help and tips!

Shinrya

Hey Mike, is there any kind of reason for placing CSS blocks above the fold i.e. load performance, or is this just a good practice habit web devs like to preach?

Edit: just asking as I have all my CSS customizations for "Entire Site" sitting in my footer.

Hikin' Mike

@Shinrya said:
Hey Mike, is there any kind of reason for placing CSS blocks above the fold i.e. load performance, or is this just a good practice habit web devs like to preach?

Edit: just asking as I have all my CSS customizations for "Entire Site" sitting in my footer.

I'm not a developer, just a guy that knows just enough HTML/CSS etc to be dangerous.

I would put it before the content because I figure if the CSS loads first, it will see the HTML. If I put it after the content, it may not see some of the CSS. Totally untested/unverified.