[Support request] Non responsive section

Home Forums Support [Support request] Non responsive section

Home Forums Support Non responsive section

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #512650
    Norman

    Hi Tom and Leo,

    Is it possible to make a section non-responsive?

    This site is a great example: https://themefuse.com
    On mobile it displays exactly the same as on desktop.

    However, if I use GP Sections, the background is zoomed in, and the layout changes. Can I achieve the same as the ThemeFuse site with GP?

    Thanks

    #512827
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not sure what you mean? The example you provided is responsive.

    The 3 columns below the hero image becomes 1 columns on mobile.

    If you are referring to the image, you can either try switching out the background image specific for mobile, or just insert static image using the <img> tag.

    Let me know if this helps.

    #512992
    Norman

    Hi Leo,

    Well, the header of that site isn’t responsive right? What I mean by non responsive, is that it looks exactly the same on desktop and mobile, whereas with GP, on mobile, the image is zoomed in and you only see the center of the image.

    I would like to have the header on mobile exactly the same as on desktop.

    By header I mean the first section, the image with the H1 and button and stuff.

    Thank you:)

    #513412
    Leo
    Staff
    Customer Support

    The image shrinks from desktop to mobile so it’s actually considered as responsive.

    Since you are using some sort of animated content builder for that section, you will have to ask their support on how to achieve this.

    GP’s section simply displays their HTML/content.

    Let me know if this makes sense.

    #514029
    Norman

    Hi Leo,

    I’m sorry, I think I’m not getting my question across.

    I’m using GPP, no other builders. The animations are done with CSS3AnimateIt from jackonthe.net.

    Forget the responsiveness. The thing I’m trying to achieve, is to have the whole picture showing on mobile. Right now only the center is showing.

    I hope I’m making more sense now. Much appreciation for the patience.

    #514258
    Leo
    Staff
    Customer Support

    Unfortunately background images aren’t responsive by nature – it’s not a theme thing.

    If you take a look at the example site you provided closely, that image isn’t responsive either. If you resize the browser window down, the mouse and half of the keyboard gets cut off as well.

    The reason why it works for them is because the focus of their image is in the center which is something we can achieve in GP as well with this CSS:

    @media (max-width: 768px) {
        #header.generate-sections-container {
            background-position: center center;
        }
    }

    But I don’t think that works for you either as the focus of your image isn’t in the center like the example.

    You could also try switching out the mobile background image of that section with this CSS:

    @media (max-width: 768px) {
        #header.generate-sections-container {
            background-image: url(https://MOBILE-IMAGE-URL-HERE)
        }
    }

    Let me know if this helps.

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