Issue with other projects panels in the 21 day portfolio course

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!

https://preview.webflow.com/preview/iain-macdonald-ux-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=iain-macdonald-ux-portfolio&preview=ea06ee6c28302de72c584f6d7aee9fa4&pageId=60228db9045ee71e3dd8337c&itemId=60228eda0edd90121c811dc1&mode=preview

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 :+1:

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.

1 Like