Firefox Not Liking My CSS

Design help General
1

Hey folks,

I’m running into Firefox problems when executing the CSS for my self-portrait image at the top of my homepage.

Firefox

21 PM
21 PM756×894 88.5 KB

Other browsers

51 PM
51 PM781×840 243 KB

My guess is that it doesn’t like how I’ve defined my width and height values, but it’s best I could do for optimizing responsiveness.

Things that I believe are affecting it:

  • I’m using a background-image for the div face-gray.
  • To compensate for this, I’m using a padding-top value to define the height of the parent div.

Apologies for my messy code, but I could really use some advice!

Thank you!

Here is my site Read-Only: Webflow - Kirk's Portfolio

2

Here, put your “Published” link. We all can load Firefox to see what you mean.

3

I rolled back the changes I made so you can see the issue… http://portfolio-bykirk.webflow.io/

After some digging, it has to do with the way Firefox handles padding as percentage values.

I wanted to my div to scale proportionally (mimicking the behavior of an img element), and I found that most browsers will calculate padding percentage values in relation to the width value. But apparently, Firefox doesn’t like that kind of hack.

I ended up compromising with an ugly fix, but it works for what I need. Here’s a link to my Github showing the CSS file differences.

If somebody has any better recommendations, that’d be awesome! Totally understand if people don’t want to waste their time with this though haha.

4

Ah gotcha… yeah work-arounds, as you know, are sign of a really scrambler. We can’t always hit every fairway. Sometimes you need to simply get to the green to putt. Glad you found a fix. Take care.

1 Like
5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.