How can I keep diagram sizes uniform when viewed on mobile devices?
-
On my site I have a page that lists members in a grid with circular portraits that are all the same size and remain close to the same size on the webpage when viewed on a computer, however, appear as drastically differing sizes when the same page is viewed on a cell phone. I’d love to post a picture to illustrate, but not sure how to do that here.
If someone has advice on how to keep these diagrams uniform on mobile devices or how to post pictures to show what I’m talking about, I’d love hear it!
This is the page I’m talking about, if you can view it on both platforms you’ll see what I’m talking about:
https://ccwolfpack.com/wolfpack-members/
Appreciate any help!
Thanks for your time!
-Hoot
The blog I need help with is: (visible only to logged in users)
-
Hi there,
This is happening because those icons are not the same size and they tend to “shrink” when viewed on a mobile device. For example some of those icons are 100x100px while others are 100x99px. This single pixel difference affects the ratio of the image thus resulting in looking smaller when viewed on smaller screens.
Just make sure that all of your images have the same size and ratio. If it’s not possible to resize them to your exact needs through the interface of your site you can use a tools like IrfanView (http://www.irfanview.com/).
If this doesn’t work or you have more questions, just let me know and I’ll be happy to help!
-
Hey thanks! I didn’t realize a single pixel difference could do that! I’ll try resizing them manually or with the link you kindly provided.
Appreciate the advice!
-
-
So I took your suggestion and resized all the icons that were slightly off so that all are 100×100 and again, when viewed on a computer screen, they appear uniform, but when viewed on a mobile phone, for example, some are again displaying noticeably smaller than the others, and also do not appear uniform in their placement inside the borders of the table I’m using, some are higher, touching the top border, some slightly lower, etc. I’ve tried using the function of displaying them as thumbnails and they look great, but each icon is linked to separate profile pages and there’s no way (that I know of) to individually link the icons to separate pages. If there is, that would be my preference.
Thanks again for any additional help you can suggest. Here is the page I’m talking about:
- The topic ‘How can I keep diagram sizes uniform when viewed on mobile devices?’ is closed to new replies.
WordPress.com Forums 