Hi Guys. Can someone please help.
My problem, which is driving me literally nuts, is as follows.
I had a large selection of images set at:
400 x 400, for LG.
344 x 344 for MD.
400 x 400 for SM.
270 x 270 for XS
I wanted to update the images. So I chose to create 800 x 800 and I set them to the exact same settings as seen above. Everything looks exactly the same when I check each size, but yet now, when I view them on my mobile as an example, they are not correct, and look squeezed in shape, similar as an example to say, 344 x 217 or similar. I can not see how or why it is doing this when in my browser on all settings when testing in Blocs it is exactly how it should be, and all settings have been set as seen above.
Does anyone know what I can do to get it to work correctly?
Thanks for any help,
This is an aspect ratio issue It’s best to use the same image for all breakpoints. If you need to adjust the image dimensions on other breakpoints, use the resize handle to adjust the image WIDTH to maintain the aspect ratio. Don’t change the image dimensions (width and height) in the properties panel - this will remove the ability of blocs to maintain the aspect ratio at different breakpoints. Another alternative is to create a custom class for your image and use that to change the width ONLY of the image on each break point. This too will maintain the aspect ratio.
1 Like
@hendon52
Hi Hendon - thanks so much for guiding me in the right direction.
The images I used previously were 400x400 and I was able to use them directly in the image placement which created the default settings I mentioned in my first comment.
Since then I updated all images to 800x800 because I needed the images more detailed with included text. They look perfect when set but they default instantly to 501x501. Which makes them too big on desktop for what I need.
This is where I implemented the panel adjustment to the exact original settings before modifying the images but sadly it’s squeezed the images on mobile once I did this.
So from your comments, I should be able to resolve this and have everything set back to how I want it. If I run into difficulties can I give you a dm please.
Thanks so much for your help.
P.S
Can I set alternative breakpoints within one custom class of an image?
The nice thing about custom classes is that you can change the setting for each breakpoint without having to create new classes. Just go to each breakpoint layout and edit the same custom class.
1 Like
@hendon52
Thanks so much Hendon. I adjusted just as you said and it fixed the issue perfectly. Can’t thank you enough!
@Norm Total appreciation for that size adjustment tool for images! Helps so much!