Unwanted spacers between content blocks on a mobile devices

CodyPCodyP Rockhampton, QLDPosts: 6Registered Users Big grins
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

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,078Registered Users Major grins
    edited December 26, 2018

    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).

  • CodyPCodyP Rockhampton, QLDPosts: 6Registered Users Big grins
    edited December 26, 2018
    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,078Registered Users Major grins

    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.

  • CodyPCodyP Rockhampton, QLDPosts: 6Registered Users Big grins
    edited December 27, 2018
    That makes a lot of sense, cheers for the help and tips!
  • ShinryaShinrya Peter Stewart Hong KongPosts: 131Registered Users Major grins
    edited December 27, 2018

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,078Registered Users Major grins

    @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.

Sign In or Register to comment.