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.
Thanks in advance for your help
Here is my site Read-Only: Webflow - toscanotto.com
Here’s a picture of how the grid looks like in my preview:
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…
Hey @toscanotto !
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:
Or by using an image element inside of the divs for the background image:
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.
Hope this helps!
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…
I just took a look at what you have right now and it looks like what you did is scaling nicely!