-
Hello,
I primarily optimize my pages for mobile, but I recently realized my images often can’t be viewed within one screen on a standard desktop. Example: https://printablesforlife.com/30-minute-appointment-calendar/.
I want my images to be viewable within a standard desktop size, but whenever I manually add the height and width for the image, it becomes non-responsive on mobile. I’d like my height and width to be auto/100% in most cases so that it fills the screen… But only resize for desktop.
To work around this, I used the “transform” and scaled the featured image and Pinterest pin for desktop only. The problem is it creates a lot of white space on the screen for the original container. Example:
https://printablesforlife.com/test-page/Is there a way to accomplish this without manually setting screen sizes for mobile, tablet, and desktop devices?
-
Maybe try something like this?
@media(min-width: 1025px) { .entry-content :is(.wp-block-image, .gb-block-image) { width: 80%; margin-left: auto; margin-right: auto; } } -
This doesn’t appear to be doing anything… unless I’m using it wrong. I just added it to my theme CSS.
-
There’s a typo in your CSS, please try copy and paste instead of typing 🙂
https://app.screencast.com/QRRzTFVMRAy6d -
Oh, yes, I originally copy and pasted, but was then playing around with the values when it didn’t appear to be working. Im sure that’s when the typo happened… But it wasn’t working when I copy and pasted either.
-
Hi there,
in your CSS you have:
@media(min-height: 1025px) {
So the CSS will only apply when the browser viewport is at least 1025px in HEIGHT.Are you sure thats the correct condition ? As it only going to make the image smaller on very tall screens
-
No I don’t think that’s the correct condition then. I only want images to resize when the browser viewport is less than 1200px (height of my images).
-
what do you mean it’s not working? Don’t you want to shrink the image on desktop?
If so, this is the CSS which sets the image to 80% in width on desktop, you can adjust the value 80% to what ever value you want:https://generate.support/topic/desktop-image-resize/#post-103109
Ana make sure you remove the
transformeffet. -
I’m not sure why it’s not working. I’m using screenfly to test different screen sizes and the image is not changing.
-
And yes I want to resize my images on desktop. All images on the site are 1200x1200px. Most viewports aren’t that tall on browsers, so users have to scroll to see the whole image. I want the site to detect when the viewport is shorter than 1200px and resize the image to fit.
-
I want the site to detect when the viewport is shorter than 1200px and resize the image to fit.
To detect the viewport height requires custom JS, unfortunately.
-
However, the CSS is working to limit the image width:
https://app.screencast.com/bSCcfgHo2mTMGYou can also try this CSS instead which limits the image height to 50 viewport height:
@media(min-width: 1025px) { .entry-content :is(.wp-block-image, .gb-block-image) img { max-height: 50vh; width: auto; } .entry-content :is(.wp-block-image, .gb-block-image) { margin-inline: auto; width:fit-content; } } -
Yes! That is doing the trick 🥳. It is making the image a little too small though. Is 50, 50%? Can I change it to 75 to make it bigger?
-
The
50vhis 50% os the viewport height. So yes you can can increase that value to eg.75vh
- You must be logged in to reply to this topic.