[Support request] How to make my site responsive

Home Forums Support How to make my site responsive

  • This topic has 5 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #392326
    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

    #392407
    Leo
    Staff
    Customer Support

    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/

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

    #392912
    Leo
    Staff
    Customer Support

    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.

    #392976
    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?

    #393037
    Tom
    Lead Developer
    Lead Developer

    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.

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