I should start by saying straight up that I am a newbie to HTML5 and CSS, so there may be an easy solution for this. I have recently launched a project website using Omeka, which was provided by my university. I linked images to a few of my pages, and unfortunately they look terrible on mobile phones as they don’t resize to fit the screen. Is there an easy way to fix this? Unfortunately I don’t have access to the back end files of my website as it is hosted on the University server, so I need to use the html editor or CSS plugin. Here are some example of pages with unresponsive images:
One simple option: where you currently have style="width:xxx; height:xxx" in those img tags, replace it with style="max-width: 100%;".
Just having that style will make large images fill the available space on both desktop and mobile. If you want to also keep “shrinking” the images on the desktop views as you are now, you could also add max-height, so like style="max-width: 100%; max-height: 396px;" in your homepage example.
Hi there,
Thank you for this. Unfortunately I could get neither of them to work. The top example "style=“max-width: 100%;” deleted after saving, and the second example didn’t seem to make any difference when viewing the image on a mobile phone. I am unsure what I am doing wrong…