Relative Positioning & Negative Values with FIrefox

[161creativedesign]

Hey guys,

Wondering if anyone has come across the same issue when viewing their live site on Firefox 52. Typically webflow is a one to one with the chrome rendering engine but I have noticed that when using negative padding & occaisonally specific relative positioning, firefox (and sometimes safari) don’t seem to render these values, often leading to broken designs. (see below)

Wondering if anyone has any advise for dealing with this. Thanks in advance!

There is supposed to be padding all around this red div element.

Similarly, this logo IMG should be further away form this text via negative relative positioning.

Public link to project:
https://preview.webflow.com/preview/clg-website-2017?preview=830e4152cccaafa48ec4f5abd63480fe

[161creativedesign]

Update: I’ve found that this is a bug with how Firefox resolves % padding values with flex children. (apparently a very old bug) that also appears on MS edge browser. I"ve resolved to using rem/em & vh/vw as my sizing measurements.

I have also found that this code has been working for some to force the padding.

.padding:after {
content: ‘’;
display: block;
padding-bottom: 100%;
height: 0;
}

Would anyone know where I should be putting this snippet?

[cyberdave (Dave S.)]

Hi @161creativedesign, thanks for the good question.

Take css and wrap it in a style tag like this:

<style>
 .padding:after {
content: '';
display: block;
padding-bottom: 100%;
height: 0;
}
</style>

and then put it in the header of your page, or in the header at the project settings level on the custom code tab, see here: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

After saving code changes, republish the site for the code changes to take effect. Custom code is only rendered on the published site.

I hope this helps

[161creativedesign]

Thanks @cyberdave,

That is super helpful. It is my understanding that this pseudo class applies to all padding for the whole page/site. Do you have any experience using these types of classes?

[cyberdave (Dave S.)]

Hi @161creativedesign, yes, but what I generally try to do, is to not use negative values for margin or padding, but rather use position offset to finely control smaller offsets. It is a design decision, you might also look at flexbox, try the game: https://www.flexboxgame.com/

[161creativedesign]

@cyberdave

<style>
.padding:after {
content: ‘’;
display: block;
padding-bottom: 100%;
height: 0;
}
</style>

I see, many thanks for your time! Actually I do have one last question. What I’m really trying to do is just use a relative measurement for padding. I do already do a great amount of my positioning using Flexbox.