Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Prototyping in the Browser Design Patterns Creating a Flexible Image Gallery

Ben Moore
Ben Moore
22,588 Points
Posted by Ben Moore
Ben Moore
22,588 Points

Browser Compatibility

It doesn't appear the rendering of '.gallery a' works in Firefox. I switched over to Chrome to test and it works fine.

.gallery a {
  width: 48%;
  margin: 1%;
  height: 10rem;
  background: #99F;
  display: block;
}

4 Answers

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

The problem seems to be with Firefox and using a % for the top and bottom margins. After a bit of testing, I believe one possible work around is to set the vertical margins to "1vw", for 1% of the viewport width. While this isn't ideal, you can adjust the "vw" value slightly to accommodate the differences. Try using : margin: 1vw 1%; and see if your results are acceptable, or not.

EDIT: well, after more digging, I found the answer to why this happens. I can't explain it as well as Daniel Holbert has on comment 13 of this thread : https://bugzilla.mozilla.org/show_bug.cgi?id=1163119 It's part of the standard, and apparently Firefox is the only one that actually follows the specification. Rachel Andrew has a great post on the issue, and it applies to Grid as well as Flexbox : https://rachelandrew.co.uk/archives/2017/12/20/how-should-we-resolve-percentage-margins-and-padding-on-grid-and-flex-items/

EDIT#2: It sounds like they have come up with an answer, from a link in the previous link, https://www.bram.us/2017/07/30/vertical-marginspaddings-and-flexbox-a-quirky-combination/ Firefox 60 supposed to be making changes to match the rest, if I am reading this correctly, so this may be only a temporary issue for those with Firefox.

Hakim Rachidi
Hakim Rachidi
38,489 Points

I think this is the best result you can currently get. I first thought I could calculate the margin with the calc() method.

BUT the result of the calc() method is always a percentage value when the one of the operands a percentage value is.

Hakim Rachidi
Hakim Rachidi
38,489 Points
Hakim Rachidi
Hakim Rachidi
38,489 Points

I discovered a related issue that has to do with the top and bottom margins of the gallery and anchor elements, which doesn't show up in Firefox. In Safari (same html and css) it is rendering with all margins as aspected.

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

The selector construction and properties shown here are all very basic, any browser should handle them. I would strongly suspect any compatibility issues would be somewhere in the other code (HTML or other CSS, if any).

Kat Stacy
Kat Stacy
41,658 Points
Kat Stacy
Kat Stacy
41,658 Points

I experienced the same problem. I do not think there is an error in the code since at the beginning of the lesson Nick had us open a new workspaces.