I have an issue with a gallery I’ve created using the WordPress media tool, which appears distorted when viewed on mobile, as shown in the screenshot I’ve attached. Does anyone know how I could fix it to look just as good on the mobile version as it does on the desktop version?
https://www.fotov60.com?LSCWP_CTRL=before_optm
see if image width and height is define, remove it if there is…, image max-width is equal to 100%, adjust column for small screen
I watch the code an see this:
[gallery ids="8336,8337,8338"]
How can edit it?
To start with applying height: auto to you images will prevent them from breaking their aspect ratio and squashing at narrow widths.
Though I would probably wrap images before they got to that point.
Currently the 3 image gallery uses foats with a percentage width. That’s quite an old-school way of doing it. Using flex should be a more capable way of handling this kind of thing. With 3 images you may just want to switch direction to column in a media query.
I don’t quite understand your message. If I access the code view of the post editor, I only see the line of code [gallery ids="8336,8337,8338"] referring to the gallery, and from the visual editor view, I can only access the menu you see in this screenshot:
How can I modify anything?
This is what I see in Inspect.
I guess that is part of the template scripting, to select the items for the content of the gallery.
It’s the CSS that controls the layout and look of the gallery.
This rule is the rule that distorts the image:
@media (max-width: 520px) {
* {
max-width: 100%;
}
}
That sets everything on screens less than 520px to have a max-width of 100% (rather a broad brush but that’s another story). This sets images to a max-width of 100% which is fine as long as the max-width is greater than the 150px width of the image. Once that breakpoint is breached on small screens then the width is made smaller than 150px and distorts the image.
You need to set the image height to auto in the css to maintain aspect ratio.
Add this to your custom css:
img{
max-width:100%;
height:auto;
}
If you don’t want 3 small images across the screen on small screen then add some more custom css similar to this:
@media (max-width: 520px) {
.gallery-item{
float:none!important;
margin:auto;
width:auto!important;
max-width:280px;
}
.gallery-item img{
width:100%;
}
}
It all depends on what you want it to look like.
2 Likes
Thank you for your response.
What is the difference between the first code and the second one?, how would they look? In any case, should I add this CSS only to the section:
/*Responsive for mobile*/
@media (max-width: 520px) {
-----------------------
or should I also add it to these others? I don’t have devices to check how they look, and I don’t know how to simulate them in the browser to see if they have the same problem.
@media screen and (max-width: 768px) {
----------------------
/*Extra large tablet screen only*/
@media (min-width: 768px) and (max-width: 899px) {
-----------------------
/*for tablet screen*/
@media (max-width: 768px) {
-----------------------
The first rule (below) can be used globally for all media and protects images from breaking out of their containers. Most people would put that rule in their reset stylesheet as a default.
img{
max-width:100%;
height:auto;
}
The second rule (below) was specific for small screens to make the images vertical and take up more screen as they were very squashed at less than 520px.
@media (max-width: 520px) {
.gallery-item{
float:none!important;
margin:auto;
width:auto!important;
max-width:280px;
}
.gallery-item img{
width:100%;
}
}
This is how it would look on a small screen (iPhone SE) with my code added.
I’m not a WordPress user but I would suggest that as with any framework you only make changes to your custom css file and not the theme at all. Add the css I gave you to your custom css file (which I believe you can do in WordPress quite easily) and that will over-rode anything else. Unless you are an accomplished WordPress user I would not directly edit any of the themes code but rather make your changes in a custom css file which follows after all the other css files.
Easy. Just grab the corner of the browser window and drag it smaller and smaller and you will see the width of every device ever created now and in the future (apart from those bigger than your monitor). There are hundreds of devices all at different widths so you just concentrate on the design. Grab your browser window and drag it smaller and if at any point something breaks then use a media query at that point at fix it.
You can also use developer tools in Chrome (and other browsers) and there is a device toggle icon in the toolbar of the devtools that will mimic a series of device windows. The developer tools are your best friend when coding so you must become familiar with them.
1 Like
Thank you for the explanation. Finally, I opted for the second code snippet you provided, and following your instructions with the browser, it seems to display correctly on different resolutions. The only change I made was:
.gallery-item {
float: none!important;
margin: auto;
width: auto!important;
max-width: 150px;
}
.gallery-item img {
width: 100%;
}
I set the max-width to 150px because during the Insights test, I received a warning about incorrect aspect ratio. At least for this case, it seems to work, although I’m not sure if it might cause any issues for galleries in older posts since I haven’t checked, as I don’t recall any specific posts where I also used them. Does it seem correct to you? Do you visualize them well?
That’s because you left out the height:auto rule I gave you
If you only change the image’s width then you break its aspect ratio. The height of the image must be set to auto so that it maintains aspect ratio. The image won’t be fully responsive without it.
You set the max-width of the container to 150px which is the image’s correct dimension so the height remains at 150px However if you were to scale smaller (not that its needed) the image would once again squish. If you are happy at 150px then that’s fine but seems a little small to me.
To recap: An image is made responsive by setting its width to a percentage or by capping it to a max-width in percentage. In all cases the height must be set to auto in the css. (The image in the actual html though should still have it’s correct width and height applied as the browser needs that to work out the aspect ratio and allocate space for it.)
The page does look better to me anyway even at the 150px width.
Then to make it work with any size and make the image fully responsive I need to write this?
.gallery-item {
float: none!important;
margin: auto;
width: auto!important;
height: auto!important;
max-width: 200px;
}
.gallery-item img {
width: 100%;
}
No it’s the image that needs height:auto