Responsive image in sections

Home Forums Support Responsive image in sections

  • This topic has 15 replies, 3 voices, and was last updated 4 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #190245
    Corinne

    Hi Tom,

    I’m using the sections addon (which is great by the way :-)) and have inserted images in some sections.
    But when the screen becomes smaller, they are not responsive (as they can be in the page header) and are cut from the right side.

    Is there a way of making images responsive in sections?

    Thanks,
    Corinne

    #190400
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    They should be responsive – can you link me to the page?

    #190915
    Corinne

    Hi,
    Here is the site : cpa-etudes.fr
    On the homepage the image is in the page header. On the other pages they are in the first section (as I wanted to insert text above the image and couldn’t manage to do so with the page header)
    Thanks,
    Corinne

    #191088
    Tom
    Lead Developer
    Lead Developer

    Ah, well background images and static images behave differently when resizing the browser/being on mobile.

    One thing you can do for the section backgrounds is center them:

    .generate-sections-container {
        background-position: center center;
    }

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #191330
    Corinne

    In that case, I think I’ll prefer to place them in the page header.
    Just to make sure I didn’t miss anything : I didn’t manage to write the title above the image in the header, could you confirm it’s not possible? Is there a way to do so?

    #191370
    Tom
    Lead Developer
    Lead Developer

    If you add the image using HTML into the content section of the page header then you can add whatever you want above the image.

    #191388
    Corinne

    I feel stupid but it doesn’t work…
    I have used : <body background=”image.png”></body>. It’s not correct?

    #191418
    Tom
    Lead Developer
    Lead Developer

    If I’m understanding correctly, you would add this into the “Content” box of the Page Header section:

    <h1>Your title here</h1>
    <img src="THE URL TO YOUR IMAGE HERE" alt="" />

    Let me know 🙂

    #191543
    Corinne

    Actually, I would like my title to be on the image (sorry for my english, maybe “above” was not the correct word…).
    To synthesize, what I would like is :
    – to have my image in the first section or in the page header
    – with the title being on the image (like if the image was in the background)
    – and the image being responsive when resizing the browser or being on mobile (and not being cut from the right side)

    Thanks again 🙂

    #191741
    Tom
    Lead Developer
    Lead Developer

    Ah, well then you’re really better off using the image as a background image.

    Alternatively you could add your title to the image using Photoshop or something similar, but that’s not great for SEO.

    You’ll run into all kinds of nightmares positioning text on top of an image, especially if you want it to be responsive.

    #228032
    Lisa

    Hi Tom,

    I’d like to have the background images (page headers) on a few pages on my website resize on mobile so that it’s possible to see the entire image and not just the center of it. Is there a code or anything that makes that possible?

    Thanks,
    Lisa

    #228073
    Tom
    Lead Developer
    Lead Developer

    Not easily I’m afraid, backgrounds images aren’t responsive by nature.

    One thing you can try is adding this CSS:

    @media (max-width: 768px) {
        .generate-content-header {
            background-size: contain;
        }
    }
    #228074
    Lisa

    Thanks. Is it possible to add a height limit to the code as well?

    #228184
    Tom
    Lead Developer
    Lead Developer

    The height of the image?

    Contain will keep the images height, but keep the aspect ratio to the width of the element.

    I’m not aware of any good ways to change the background images height.

    #228366
    Lisa

    Okay. Thanks!

    Lisa

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