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?

  • 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.) – mickmackusa Sep 17 '18 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. – Bookwyrm Sep 17 '18 at 16:39

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;}


Note that I am assuming that your images have a width of at least 600px.

  • OP is seeking an onclick feature. – mickmackusa Sep 17 '18 at 20:01
  • @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. – itoctopus Sep 17 '18 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.) – mickmackusa Sep 17 '18 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.