[Resolved] Section Background Responsiveness on Mobile Devices

[Marko]

Hello Tom,

we are using your premium theme for our website and the landingpage/homepage is built using the sections.
Website is: http://www.pebblestuff.io

The problem is that the sections aren’t that responsive on mobile devices and I’m looking for a way to improve it. Every sections has a background picture and when someone is looking at the sections on a mobile device they just see the very left part of the background picture.

Would it be somehow possible to move the section background to the left or downsize it, so the user is always looking at the “center” of the background?

Hope you understand what I would like to achieve. I made a short video(1min long) where I explain this and show an example on our website. hope this explains it better:

Thanks a lot for you help! Marko

[Tom]

Hi Marko,

Try adding this CSS:

.generate-sections-container {
    background-position: center;
}

It’s something I may add to the next update.

Let me know 🙂

[Marko]

Well, that does exactly what I was looking for. Thanks a lot!

Checked it on a couple of screen sizes and it looks much better now then before.

Another thing I was just thinking about..would it be possible to affect the height of the sections when someone on a mobile device is locking at it? Or is this linked to the text and the padding?

Something like a if statement: if devicescreen smaller than 10″ set the section height to 150px (now its 300px)

I see you are the only one here answering questions, must be a lot of work. Hope I’m not asking for too much 🙂

Thanks

[Tom]

The height of the sections are generally specified by the top/bottom padding and the content within.

You can adjust the padding on mobile if you give your sections a custom class (using the Custom Classes field), and then add some CSS like this:

@media (max-width: 768px) {
    .my-custom-class .generate-sections-inside-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

Hope this helps 🙂

[Marko]

Yes, it helped!
I have adapted your code snippet a little bit and it works.

I have also learned what media queries are. Pretty nice thing, never used it before.

Thanks again. I’ll mark this topic as solved.

[Tom]

Awesome, glad I could be helpful 🙂

[Author]

Posts