Non responsive section

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.

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

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.

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.

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.