[Resolved] How to set the feature image so that it doesnt cut off at the bottom

Home Forums Support How to set the feature image so that it doesnt cut off at the bottom

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #326724
    Tara

    Hi, I uploaded a feature image however; in the live view, the height cuts off at the bottom – i.e the bottom part of the image is cut off. How can I keep full picture but allow the full image to resize based on device?

    #326733
    Leo
    Staff
    Customer Support

    Hi Tara,

    Are you referring to featured image in single post or main blog page?

    Are you able to provide a link to your site? Thanks!

    #326768
    Tara

    Hi Leo,
    The image is on the home page (its not a blog) Here is link https://playbox.space/

    The top image is cutting off at the bottom. To show you what part is cut off, I added the same image again right below using a page builder. How can I adjust it to see the full image?
    Thank you for your help.

    #326785
    Leo
    Staff
    Customer Support

    Try adding some top/bottom padding in the page header content setting:
    https://docs.generatepress.com/article/page-header-content/

    #326811
    Tara

    Hi Leo,

    I tried the top/bottom padding and it didnt work.
    Tara

    #326866
    Leo
    Staff
    Customer Support

    Sorry is this fixed now? Looks like the full picture to me?

    #327150
    Tara

    Hi Leo,

    I was making a change to the site and had to turn off the feature image for a short while. Sorry about that. I added it back. It is still not fixed. You will see that the same image just below shows the bottom section that I need to add back. I need the top and bottom showing.
    Thank you for your help with this.
    Tara

    #327210
    Leo
    Staff
    Customer Support

    So what happens when you add, let’s say 200px in the Top/Bottom padding field? Nothing?

    You could try this CSS but it should do similar thing:

    .generate-content-header {
        padding-bottom: 200px;
    }
    #327299
    Tara

    Hi Leo,

    The code worked and I can see the full picture. Thank you.
    For the mobile device the image is not resizing. The image on the page builder does resize but not the feature image on GP. Is there additional code I can add to address the mobile view?

    #327323
    Leo
    Staff
    Customer Support

    Unfortunately background images are not responsive by nature.

    I think the best option here is to set a different image specifically for mobile:

    @media (max-width: 768px) {
        .generate-content-header {
            background-image: url(https://MOBILE-HEADER-IMAGE-URL-HERE);
        }
    }
    #327407
    Tara

    Hi Leo,

    Thank you for the css code. I set a smaller image for the mobile view. The code works well as long as I remove the content that lays over the image. Its important for the content to be included though. How can I address this?

    Thank you Leo, I think its almost there.
    Tara

    #327418
    Leo
    Staff
    Customer Support

    You can insert two divs in the page header content with built in hide-on classes. Something like this:

    <div class="desktop-content hide-on-mobile hide-on-tablet">
        Desktop only content here
    </div>
    <div class="mobile-content hide-on-desktop">
        Mobile only content here
    </div>
    #327661
    Tara

    Hi Leo,

    I added this code however the image still does not adjust to mobile when the content is included. It only adjusts when the content is removed.

    Sorry for the inconvenience.
    Tara

    #327739
    Leo
    Staff
    Customer Support

    No apologies 🙂

    Looks like you are inserting the image without merging with the header now?

    If you still want to the content to merge with the header, then I would try creating the content with Elementor and merge it this way: https://docs.generatepress.com/article/merging-header-navigation-content/

    #327764
    Tara

    Thanks Leo. It seems like the page builder option is easier with the mobile view and adding the content.

    Again, thank you for your help.
    Tara

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