-
When I did a performance check of my site on mobile, among other errors was one related to the size of the image featured on mobile. I added these codes in CSS but I couldn’t fix them.
“/* Settings for smaller sizes (mobile) */
@media only screen and (max-width: 768px) {
.featured-image img {
width: 100%; /* Image takes up the full available width */
max-width: 100%; /* Prevent container overflow */
height: auto;
}
}/* Medium screen (tablet) settings */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
.featured-image img {
width: calc(100% – 40px); /* Adjust for separation */
max-width: 100%; /* Prevents container overflow */
height: auto;
}
}/* Settings for desktop */
@media only screen and (min-width: 1201px) {
.featured-image img {
width: auto; /* Display image at full size */
max-width: 1160px; /* Prevent container overflow */
height: auto;
margin-left: 0;
margin-right: 0;
}
}”.What other CSS solutions could I add?
Thank you in advance.
-
Hi there,
so google is complaining that the images displayed in the latest posts blocks could be of a smaller file size.
The reason:
On the mobile device the image is being displayed at a width of 300px.
And the simulated device google uses has a x2 HD resolution.
Which means the browser would ideally want an image that is 600px wide and chooses the closest match available which is the medium large with a width of 768px.
Which is larger than required. Hence the warning.Try this CSS:
.wp-block-latest-posts__featured-image img { width: 100%; max-width: 384px; }It will force those images to fill the container but no wider then 384px. Which on a mobile x2 HD device will be 768px for which there is an exact size image available to the browser.
It should eliminate that issue.
-
Is the code shown in the first post still needed or can I use both? Thanks in advance.
-
The CSS you have as the start of the topic.
That would only apply to single post featured images, and I am not sure it’s doing anything. -
I added that code and saw an improvement. Currently after another check I have only one image but it is better than before. Thanks.
-
Glad to be of help
- You must be logged in to reply to this topic.