Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Section Background Responsiveness on Mobile Devices

Home Forums Support Section Background Responsiveness on Mobile Devices

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #170522
    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

    #170832
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #170921
    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

    #171002
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #171025
    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.

    #171033
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could be helpful 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.