[Support request] featured image

[Marcin]

Hello!
I set the featured image size to 353×235, but on mobile it looks bad.
It is possible to set the size of featured images on mobile version to “auto”?

website: http://marcinszkodzinski.pl (See the home page on your smartphone)

[Tom]

The best thing to do is set your image to as wide as it needs to be on mobile, then do any resizing using CSS on desktop. Images can be sized down, but not up.

Let me know if you need more info 🙂

[Marcin]

I’m not sure I understand. 🙂

[Leo]

What would like to happen on mobile? It looks fine to me?

[Marcin]

Horizontal position. 🙂

[Tom]

Basically, make your image larger than it currently is, so it looks good on mobile.

Then use CSS for desktop to make it smaller:

@media (min-width: 769px) {
    .post-image img {
        max-width: 250px;
    }
}

[Marcin]

Ok, thanks.
My page is almost ready.
The last question:
How to remove “page header” on mobile devices? The whole picture on the screen looks bad.
I want it to be just a picture before content
I hope you understand 🙂
It’s a foreign language for me. 🙂

[Leo]

Since you are not adding contents in page header, try uploading it as featured images instead: https://docs.generatepress.com/article/adding-featured-images/

Let me know if this works for you.

[Marcin]

On my page, the featured image it’s the “page header”. On mobile devices, this looks bad, so I would like this to be a normal image.
It means:
On computers, the featured image is in accordance with the settings of the page header.
On mobile devices, featured image is…a normal featured image.
Is it possible?

[Tom]

Would you like it to appear in the exact same spot as the current Page Header? So basically just a static image to replace the current Page Header background image?

[Marcin]

Yes.

[Tom]

First, add this CSS:

@media (max-width: 768px) {
    .page-header-content {
        display: none;
    }
}

Then, add this PHP:

add_action( 'generate_after_header', 'tu_add_static_featured_image' );
function tu_add_static_featured_image() {
    if ( is_singular() ) {
        echo '<div class="hide-on-desktop hide-on-tablet">';
            the_post_thumbnail();
        echo '</div>';
    }
}

[Author]

Posts