Bootstrap - Some Kind of Margin on Mobile Devices (Only Right Side)

Bootstrap - Some kind of margin on mobile devices (only right side)

I figured it out:

html, body {
  overflow-x: hidden;
}

Solved it for me!

Empty left margin on body on mobile devices using Bootstrap

In the block which had the heading 'Download original swipe files to ensure your success.' you have the text, an image to the side, and the caption 'one click download of swipe file'

The caption is actually a svg file and I think at some viewports it's too wide for the bootstrap column and it's disrupting the grid. I can't tell for sure, but you could try temporarily removing the caption and see what happens.

The behaviour I'm describing is most obvious when the browser window is around 780px ... it's always possible that we are looking at different things ;)

Good luck!

How to remove space on right side when in mobile view in Bootstrap 4?

It's caused by this rule:

.no-pad {
    padding-right: 0px;
}

Remove the no-pad class and use responsive Bootstrap spacing classes (such as px-md-0 etc.) for spacing.

Unwanted white space on right side in mobile view

I think there might be one element on your page which might have a width and a padding or margin exceeding 100%.
When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.

Try and find this using the inspect element and change this in CSS with using media queries

Random Whitespace/overflow on right side of website only on mobile devices

Well I can't believe it but I had overflow-x: none, instead of overflow-x: hidden; I also had it on the wrong media query in my CSS.

Just glad I'm not crazy! lol

Margin on right side of site

The <div class="row"> right after the <!-- Contact Form - START --> comment is what's throwing the margin off. It looks like if you removed the margin-right: -15px; from that "row", it should fix it.

Showing unwanted space on the right side of a page in mobile chrome browser but fine in mobile firefox browser

this is because of you make container padding 0pxusing class px-0 remove this class with the container class at the place mentioned by me in following image. I am sure this will help.

Thank you.

---

Related Topics