Grid resizes in Firefox


I am having a weird issue where a responsive grid which works perfectly on Chrome and Edge but doesn’t react accordingly in Firefox.
It keeps resizing the images, looks like it’s based on the text inside. The divs containing the image background and text have a 30px padding set.
The grid itself has been set horizontally to 1FR for each column and vertically 50% for each row.

I included a video that shows the issue. Anybody ever encounter something like this before?

Any help would be appreciated, thanks alot!

Hi @Jarn0see and welcome. The best way to get help is to follow request guides that are pinned on top of each section. In case you have miss that here it is.

When posting please:

  1. 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 <your-site> 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.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description of what you’re trying to achieve, and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this: @username


Read-only link:

Those are the screenshots of the situation in Firefox (see services section, the explanation is above):

If you take a closer look on our published site in Chrome, then you see the version how I want it to work.

Thanks in advance!

hi @Jarn0see your issue is related to your grid rows where you use % units instead fr once fixed all should work as expected.

1 Like

Hey Stan

It’s clear now why it doesn’t work the way I try to do it. Didn’t know that a grid was working like that. Thank you for clearing this out with the helpful video!