I’m new to Webflow and I’m creating my portfolio. The elements in my grid render differently when looking at the preview and I’m not really sure why. I was following the video tutorial on Youtube called " Building a portfolio home page with Grid in Webflow - Live Stream 10/04/2021" and as soon as I started fiddling with the grid size panel (max hight etc.) I broke something.
I tried editing the values in the size panel for the tab container, for the grid component and for each Div that contains an image. I also deleted all the styles and the grid itself tried creating a new one from scratch but nothing changed…
Here’s a few pictures of the different nested containers:
Here’s a few pictures of how the grid behaves when resizing the website across the different breakpoints. It seems like each image container has a fixed height…
This is kind of a misleading thing in the Webflow designer, but since you don’t have any content in your div blocks (background images don’t count), they don’t have a width or height.
You can fix this by either adding a fixed height to the “portfolio-card-wrapper” divs:
For the second option I recreated the grid because the original one you had was auto-populating 14 rows for some reason So the naming will be a bit different.
Thanks so much!! Which would you suggest is the most scalable option to ensure these images resize correctly across the various breakpoints? Because with approach n. 1 I’d have to change the height value manually right?
Also, I’m planning to add an hover state for each of these that will contain a background colour and some text so people can open a separate page for each project. I’m not sure if the content in the hover state will do the trick making these divs look filled…
So the naming will be a bit different.