CODEWITHSUNDEEP
google-chromedeveloper-tools
CZorio
CZorio

Reputation: 483

Extra right margin on chrome developer tools

I am a bit confused with this. If I view the website as is, It appears to fit the screen properly. It fits when I click "inspect". It also fits still when I toggle "device mode".

However if I attempt to re-size or view different screen sizes in device mode, there is white space on the right at all sizes. It only does this with http://toqueholistico.com/.

Any suggestions on how to fix this?

EDIT: screeonshot enter image description here

Upvotes: 3

Views: 3371

Answers (2)

Mirza Sisic
Mirza Sisic

Reputation: 2429

This questions helped me with a very similar issue with Bootstrap, also in Chrome (Version 66.0.3359.139). Right margin was particularly problematic on smaller viewports. I solved it by using: 

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Upvotes: 0

Gideon Pyzer
Gideon Pyzer

Reputation: 24018

The issue is the .vc_row class. It's applying a negative margin on the left and right, which is causing an overflow overall.

Try overriding it with:

.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Upvotes: 2

Related Questions