Currently doing the Webflow course “CSS layout & positioning / Grid” and I’m having an issue with it. Doing exactly the same as in the video tutorial but it behaves different and looks different in safari/chrome vs firefox (in firefox it’s the ok!) & looks different as in the video tutorial also.
I have a section, inside there’s a container and inside I have my grid. 3x3 cols & rows, added 800 px height to the grid (as in the video), and the images are in the same class: 100% width, 100% height, fit: cover. When I try to span the image in the first cell to span multiple cells (the first 3 - as the first row) as in the tutorial something goes wrong. In firefox it’s ok and looks the same, but in chrome and safari it’s not - the image holds it’s ratio and expands this way, and the whole grid overlaps the 800 px height.
Added the shots below. 1st firefox, 2nd chrome and safari
All helps appreciated! Thank you!
hi @Roland_Dombi the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.
When posting please:
- Required: Share your project’s Read-Only link AND live site’s Published link
- The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
- The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
- Upload as many screenshots/screencast videos as possible to help others help you faster
- Add a description and/or post a link to a working example of what you’re trying to achieve
- Reply to users by tagging using the @ sign followed by their forum username like this: @Roland_Dombi
IMPORTANT NOTE: Always check results on published site as DESIGNER is not reliable source of truth. This mean that live page may looks different than in designer.