[Resolved] Reduce featured image height on mobile

[CRAIG]

I have read through the various posts realting to a similar issue but they haven’t quite done the trick

I am happy with the size of the featured image on desktop, however, on mobile, the image is too tall

I want to resize the featured image (posts and pages) on mobile devices to around 50% of it’s current height

I currently have this CSS:

@media(max-width:768px){
div#right-sidebar, div#left-sidebar {
display:none;
}
}

.mobile-menu-control-wrapper .menu-toggle {
    background-color: #ffffff;
}

.page .entry-header {
      text-align: center;
}

div.post-image {
	margin-bottom:1em!important;
}

div.entry-summary {
	margin-top:1em!important;
}

.single .entry-header {
    text-align: center;
}

.generate-columns .inside-article {
    overflow: hidden;
    
}

.generate-columns.resize-featured-image .post-image img {
    width: 100%;
}

And I have modified the part relating to the featured image to the following:

.generate-columns.resize-featured-image .post-image img {
width: 100%;
height: 50%;
}

This doesn’t seem to be doing anything.

Any help would be appreciated

[David]

Hi there,

if you can share a link to your site, i can provide the correct CSS for your layout.
Please note: modifying the image size with CSS will stop the browser from being able to use src-set image sizes which will mean it won’t be able to select the best size image for the job, which could lead to a much larger image being requested.

[CRAIG]

Hi David,

Thanks for that info

Is there a more efficient way to do it?

I just feel as though the image when viewed on mobile is too tall. I’m open to whatever options are available if there is a better way to do it than CSS

[David]

Can you share a link to where i can see these images?

[CRAIG]

Hi David,

I’ve added a link privately below

I’m happy with the image on desktop, it just takes up too much vertical space on mobile

I have also added a link to a site with a featured image which behaves the way I’d like mine to

***update I have added another link to a blog with a featured image that performs pretty much exactly as I’d like mine to***

[David]

Google may pick up on the size of the images, but as the largest images size in your src-set is 900px ( and mobile image requests are generarlly going to grab 768px images ) it may not be a ‘noticeable’ performance hit.

So if you’re happy with that, then:

1. Customizer > Layout > Blog – remove them width and height dimensions in the Featured > Post. And set the Attachment size whatevers required to fill the container – i assume Large or Full.

2. Add this CSS to adjust it in mobile devices:

@media(max-width: 768px) {
    .featured-image img {
        height: 200px;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

Adjust the height accordingly

[CRAIG]

Hi David,

It strikes me that the images themselves may just be too big

So I have uploaded an 800 x 400 image instead of 1600 x 800 and I have removed the image settings from the customizer

This seems to be having the desired effect

But I am concerned about performance, does removing the settings from customizer have a negative effect?

[David]

Removing the Width and Height dimensions is more likely to have a positive affect.
When you add those dimensions GP checks to see if there is an image attachment of that size, if there is not one close to the image size then it uses the object-fit CSS to resize it.

[CRAIG]

That makes sense, thanks for explaining

[David]

You’re welcome

[Author]

Posts