I'm trying to enter lessons with images on my website, but the images are too tiny on mobile devices. Is there any way to make it so they can be enlarged by clicking on them rather than trying to expand the screen?
2
-
So you are wanting a clean, screen-filling modal popup? Not just for mobile, but for all devices? Are your images a high-enough resolution for an enlarged view? What are the dimensions of your original images, if I may ask? (Generally questions that ask for coding a solution must present some effort.)– mickmackusaCommented Sep 17, 2018 at 0:35
-
Sorry for the simplicity of the question. I am a volunteer on a community site and know only what I have taught myself. Yes I am looking for a screen filling modal popup ( I couldn't remember the name), and on all devices is fine since I know specifying mobile devices would be extremely difficult. My images are approximately 750 x 500 px in their original with fairly high resolution since they are screen captures.– BookwyrmCommented Sep 17, 2018 at 16:39
Add a comment
|
2 Answers
If the images are tiny on mobile, then an alternative (and possibly) better solution is to use CSS media queries.
For example, you can have the following CSS rule that gets triggered when the width of the screen is 360px and up:
@media screen and (min-width: 360px) {
.image-class{width: 300px; height: auto;}
}
You should then add additional rules for upper resolutions:
@media screen and (min-width: 768px) {
.image-class{width: 600px; height: auto;}
}
etc...
Note that I am assuming that your images have a width of at least 600px.
-
-
@mickmackusa Correct! It's just that I think there is a better method to accomplish what he wants, which is ultimately viewing non tiny images. Commented Sep 17, 2018 at 20:17
-
Sure, but this may break the intended page layout / UX on mobile. (Of course, I don't know this to be true.) Commented Sep 17, 2018 at 20:27
What I actually ended up doing was installing JCE MediaBox and turning all of my images in to modal image popup links.
To be clearer what I was doing was adding a lesson on using a forum with example screenshots, unfortunately I took the screenshots on the desk top version of the website so on mobile devices the text in the images was too small to read without so horrible resizing. By turning them in to popup modals they were viewable again.