I’m sorry if this has been covered elsewhere. If so just point me to it.
I want to reproduce a webpage I had designed in Freeway that has a 3 x 3 grid of images of DVDs and books that I am promoting. It also has a column on the right of that grid that contains links to essays elsewhere on the website and some general contact information. I have tried several approaches to duplicating this layout in Webflow including columns & div boxes. My problem is that the images get squeezed when the device is narrower. I don’t mind if the images get a bit smaller, but I want them to keep their original aspect ratio. (I’m not sure what the term is in Webflow lingo, but by aspect ratio I mean the proportion of width to height.) In one attempt I had images where one got skinny and the others kept their aspect ration and I couldn’t figure out why.
Here’s what I am trying to recreate in Webflow so that it can resize properly.
Apparently I chose to use Inline Block in some places and have Block selected in others. Which should I use? (I obviously need to look at a tutorial explaining this.)
There are a host of other issues aside from the one I described. I have only just started trying to use Webflow (because Muse is being discontinued). I designed a fairly complicated site in Muse, but what I need to do now is go back to this old website I designed in Freeway and turn it into a responsive one.
It appears I do not have permission to access your site. you have to to permission on and off when sharing link. / There is a short explanation on sharing links. How to Enable a Webflow Share Link
@RichardP Block or inline block depend on how you wish element to display and you can change from desktop to … other… inline block for desktop and block for tablet and phone for example.
Try my example and see if it works for your project.
I would make them all inline block in desktop, all block in tablet which should make all blck in both phone displays. Then on phone landscape I would center each photo .
To center there are 3 dots in layout under margin / padding recangles (lower right)
Another option switch to flex layout in tablet. That should also work. maybe better???
Hi, I ran across the same problem - Images in grid getting squished out of proportion in mobile views - and found a simple answer.
If I click on the width and height dropdowns and re-select Auto and Auto, then the images resize to scale proportionally. Even before selecting Auto, the menu appears to be set to Auto, but manually re-selecting, for some unexplained reason, fixes the issue for me.