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

[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?

[Leo]

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!

[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.

[Leo]

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

[Tara]

Hi Leo,

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

[Leo]

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

[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

[Leo]

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;
}

[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?

[Leo]

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);
    }
}

[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

[Leo]

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>

[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

[Leo]

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/

[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

[Author]

Posts