Horizontal scroll on WordPress theme only on firefox

Question

my WordPress theme loads properly on all browsers except firefox - where I have a horizontal scroll on all my pages.

In other words, I should only be able to scroll up and down, but on firefox I can scroll left and right a little bit too.

E.g. https://b2english.com/test/

Any tips greatly appreciated.

Brian

Inspect the html and look at what element sticks out to the side? — ProEvilz, Jan 16 '19 at 20:58

score 0 · Answer 1 · answered Jan 16 '19 at 21:03

0

The problem is on thrv_wrapper thrv-page-section

margin-left: -20px !important;
margin-right: -20px !important;

Took ten seconds to find it...

answered Jan 16 '19 at 21:03

ProEvilz

5,310
9
44
74

score 0 · Answer 2 · answered Jan 16 '19 at 21:29

0

Try this:

body {
    max-width: 100%;
    overflow-x: hidden;
}
[data-css="tve-u-15efc72e013"] {
    padding: 44px 0px 40px !important;
    margin-top: -10px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

Due to some... uh... decisions Mozilla made when designing Firefox, pages with negative margins (such as margin-left: -20px;) show up kinda funky (aka. horizontal scrolling).

Hope that helps. :)

answered Jan 16 '19 at 21:29

Marge Daniels

38
6

it's not what mozilla documentation says: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom – Jan 16 '19 at 21:33
Mozilla isn't going to admit it. – Marge Daniels Jan 16 '19 at 21:59
It seem you are expressing an opinion more than an answer. To me your answer is of very low quality because of that. – Jan 16 '19 at 22:01
Looks like the commentary is for the need of the answer, not the answer itself. Let's try to be nicer with new users who are making a decent attempt to answer questions. – wgj Jan 17 '19 at 00:20

score 0 · Answer 3 · answered Jan 17 '19 at 01:32

The scrolling issue is not limited to Firefox, Chrome shows it too:

Ashley's answer is spot on. The odd usage of negative margins is generating the issue. You might also want to strip all the excessive margins, starting from body, and add a solid padding to a single parent container.

Using a yellow background on an absolutely positioned element to colour the first section...instead of simply colouring the first section directly, is also not recommended.

This element provides nothing:

<div class="tve-page-section-out" data-css="tve-u-15e3fa999e0"></div>

Simply add your rule:

background-color: rgb(245, 215, 110);

to the real parent:

<div class="thrv_wrapper thrv-page-section" style="" data-css="tve-u-15efc72e013">

like this:

.thrv-page-section { background-color: rgb(245, 215, 110); }

Horizontal scroll on WordPress theme only on firefox

3 Answers3