[alwaysgaiaParticipant]

Hi, I’m trying to limit the size of my featured images to always fit within the screen they are being viewed on. This works for the width:

.entry-featured {max-width: 90%; }

However when I add in max-height: 90%; it doesn’t do anything ( I guess it is because the screen can scroll so there is no limit?). Is there a way to use % to get the image to fit the screen by height or width (whichever the limiting dimension is)?

alwaysgaia.com

[Nabeel AModerator]

Hi there,

Thanks for writing in! Height is auto adjusted when you’ve defined max-width or width however if you still need max-height to work, you will need to define it in pixels instead of percentage. For an example you can do this:

max-height: 450px !important;

Hope this helps!

[alwaysgaiaParticipant]

Hi, however how do I define this for all platforms (phones, tablets, desktops)….if I do 450px it will look small on my desktop but over-run the screen on the phone? I’d like it to fill approx. 85% of the screen vertically (max) on the device it is on. Is that possible?

[alwaysgaiaParticipant]

And can I do this with all images in the blog (not just the featured ones) — adjusting max-height based on which screen it is viewed on..

[FriechModerator]

Hi there,

instead of px and % use em i.e.(height: 50em), But I’m afraid the image will be out of proportion and it wont look nice.

Hope this helps, Cheers!

[alwaysgaiaParticipant]

Sorry, that doesn’t help. After some more research what I’m looking for is “Adaptive image optimization”. I basically want my blog (which is picture based) to look as good on a 22″ screen as it does on a phone.

I can’t believe this would be impossible through CSS or within the X theme as all other blogs I see seem to have this? Should I be looking at 3rd party plugins?

[ChristopherModerator]

Hi there,

Height get resized in proportion to width of an image , to prevent image from stretching.
You can try this code:

.entry-featured {
max-width: 70%;
}

Hope that helps.

[alwaysgaiaParticipant]

Not sure if you read this post before replying….but I said in my first post:

Hi, I’m trying to limit the size of my featured images to always fit within the screen they are being viewed on. This works for the width:

.entry-featured {max-width: 90%; }

…
Is there no code to make the images look right on all screens? using @media maybe? I just want to limit the size (within proportions) to the screen’s limit…if it is too wide, make it smaller (in proportion)…if it is too long, make it smaller (in proportion)…

[ChristianModerator]

Hey there,

Sorry for the confusion. In that case, that would need extra media queries or Javascript that’ll make your images adaptive. Regretfully, that would require advanced custom development which falls beyond the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://theme.co/x/member/custom-development/.

Thank you for understanding.

[Author]

Posts