I’m just working through the 21 day portfolio course, and making good progress. I’ve just about finished the main page, and the project pages. However, I’ve just noticed that the panels for the other projects towards the bottom of the project page don’t look right in live browsers. They look OK in webflow, including the live preview. But in browsers, they are not filling the fill third of the container the way they should. Any ideas? Thank you!
I can’t remember exactly if they explicitly covered this in the lesson—or why it’s not showing in the Designer (it could be a little bug, or just a difference with how the browser renders these types of elements)—but the issue is caused by your inline-block
element:
There are a couple ways to fix the issue, one of which is changing the class style from display: inline-block
to display: block
. This is because block
elements take up as much width as possible, while inline-block
elements only take up as much width as they need—allowing them to sit next to one another.
The second way to fix the issue is by adjusting the class style to give it a width
of 100%
, which will make it act more like its display: block
counterpart without needing to change the display
property.
Given these Link Block elements are sitting within a grid that has three defined columns, both options will give you the same end product
Perfect, thank you! I thought I had tried that, but it was late, so I probably applied it to the image rather than the link block.