How do I make an image size relative to the screen?
-
When I place images in my blog, I notice that they do not resize relative to screen. Thus, a 150px width image takes up about 20% of column on desktop, but on the iPhone SE it takes up 50% of column width.
I thought I could simply change w=”150px” to w=”20%”, but there seems to be problems with that. At first it appears to work, but when one goes back to page on the phone the image is real real small.
Is there a proprietary WP method, I am not aware of? or CSS that can solve my problem?
The blog I need help with is: (visible only to logged in users)
-
Hi @411holy,
I began troubleshooting your site on both desktop and mobile views and it seems like the images are resizing appropriately for both screens.
Maybe try caching your browser for your site on both your desktop and phone and see if that resolves your issue.
If there is still an issue – let me know!
Cheers,
Ally
-
Ok. But go to this page
https://ewtn.blog/2017/11/27/the-pope-arrives-in-burma/
And compare the desktop and the mobile, you can even do this on the desktop window. Is there a way to make the image not stay the same size, but be proportional to the width of the screen size?
-
This might help: the images I am referring to are the ones inside the body post and are right justified, not for example, the videos. or images that are 100 percent width.
-
@411holy, the images will not resize for different screen sizes unless the image becomes too wide for the content area, then it will get narrower as needed. Since that image in the Day One post is only 150px wide, and the smallest modern mobile phones are 320px in portrait orientation, the content area is wider than 150px, so the image does not resize. If the image were say, 500px wide, then it would resize when the content area was narrower than 500px.
We could force that image to full width, or make it narrower for mobiles, but each such instance would require a separate unique CSS rule to target that image so as not to affect other images in pages and posts where it was not necessary for the image to be resized. With that particular image, the caption would change in width too if we narrowed it, which could make the caption quite long.
-
@thesacredpath, that makes sense. And oh, I do not want to make things complicated. I learned my lesson from the Game of Thrones website which ended up being a complete disaster. LOL.
Thanks.
-
- The topic ‘How do I make an image size relative to the screen?’ is closed to new replies.
WordPress.com Forums 