Reply To: Section Side Paddings

[Tom]

Hi there,

Background images are a pain when it comes to different screen sizes – this is just the way the HTML/CSS works.

What you can do is set a different background image on mobile using media queries.

For example:

@media (max-width:768px) {
      #generate-section-1.unique-section-class {
            background-image: url(URL TO MOBILE IMAGE);
      }
}

In my case, I used an image which looks good on either resolution, but it’s a bit tougher when trying to display an actual image like you are.

I coded that block myself using the built in unsemantic grid (http://unsemantic.com/).

Vertical align unfortunately only works on tables and hacky display: inline-block elements – this is why I use padding.

Also, putting CSS between those stars and slashes will ignore the CSS – it comments them out, so be sure to remove those (/* */).

I’m mostly out of office today, but will check in with you as soon as I get home.

Hopefully this is enough for you to make some progress 🙂