[Support request] How to make my site responsive

[Tim]

Hi

Im finding that my site is not at all responsive. It looks awful on mobile. Im new at this; Im using sections and merged page headers if thats any help

my website is http://www.theweirdestthingband.com

Cheers

Tim

[Leo]

Hi there,

Looks like everything is responsive except the background images which are not responsive by nature.

You can see that the static image “The Weirdest Thing” is responsive.

One thing you can try is to switch out the background images in sections for mobile only with this CSS:

@media (max-width: 768px) {
    #generate-section-1.generate-sections-container {
        background-image: url(http://MOBILE-BACKGROUND-URL-HERE);
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Tim]

Looks like everything is responsive except the background images which are not responsive by nature.

Sorry I don’t understand. Are you saying I can’t use background images at all if I want the site to be responsive ?

You can see that the static image “The Weirdest Thing” is responsive.

Sorry which image are you referring to

One thing you can try is to switch out the background images in sections for mobile only with this CSS:

Well that means I lose my images, and I don’t want that. Should I rebuild the site without using background images or is there another way? I like using page headers too but they also use background images, is there a way round that also? Thanks

[Leo]

Your site is responsive. The only element that’s not responsive is the background images but that’s the nature of background images.

I’m referring to the image with white text and black background. You can see it scale down.

If you want the full image to show on mobile then it might be a good idea to use a photo editor to add in the texts on top of the image then just add in the image as the static image.

[Tim]

Ok so are you saying I will have to abandon the use of page headers merged into the site header because they use background images and background images are not responsive?

[Tom]

Basically, background images work with the aspect ratio of your screen.

What looks good on a desktop screen at a certain aspect ratio might not look good at a different aspect ratio on mobile.

The code Leo provided here (https://generatepress.com/forums/topic/how-to-make-my-site-responsive/#post-392407) would require you to add a different URL to an image which fits the mobile aspect ratio better. Nothing is displaying because you didn’t add in your URL.

The other way to do this is to create a static image with the text on top of it. Then just insert that image into the section, which means you wouldn’t need to use background images. That way the static image would resize normally.

[Author]

Posts