Different padding in Chrome vs Safari

rmendis

If you look at the "DEVELOPMENT ACCELERATORS" section (a column item in muffin builder) on this page:

http://www.nanoscale.io/features/

It has a different height in Safari (no padding) versus Chrome (extra padding on the bottom).

How can we compensate to make it look the same height?

Thanks

Albert

Hi,

Please open your website in Firefox html mode (CTRL+U) and check html errors you got. Please fix them first and all should be fine.

P.S. Anticipating your question, yes, those errors are not associated with theme and were made by you or one of your extra plugins.

Thanks!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rmendis

I have fixed the HTML errors, but am still seeing the same behavior:

http://www.nanoscale.io/platform/

If you look at the "DEVELOPMENT ACCELERATORS" section (a column item in muffin builder) it has a different height in Safari (no padding) versus Chrome (extra padding on the bottom).

Thanks

Albert

Ok, got it. We found that the problem is related with HR line with no-line class. And if you want to keep this HR, you need to use the following css to remove it's margin:

hr.no_line {
    height: 0;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rmendis

Thanks. I put that css code in Theme Options > Custom CSS, but it did not seem to have an impact. The extra padding at the bottom is still visible in Chrome.

Also, I don't know if it makes a different, but I am not using HR. It is just a column with the following content:

<h6 style="color:#fff;"> DEVELOPMENT ACCELERATORS</h6>

Albert

Really? Please send us link to page where you pasted this code and it doesn't work then because the link you sent us previously, doesn't work.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rmendis

http://www.nanoscale.io/platform/

Has extra bottom padding under "DEVELOPMENT ACCELERATORS" in Chrome, but not in Safari

Thanks

Albert

From what we see, above css works but there is still the other margin that comes with the heading tag itself and this could be removed with the following css:

h6 { margin-bottom: 0 !important; }

But remember that we can not be responsible if this would break the other places where headings are.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rmendis

Wouldn't this have an impact in other browsers?

The issue is that this problem only appears in Chrome.

Albert

You need to paste it to check.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

rmendis

CSS seems to be working. Thanks!

Albert

You are welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next