Empty left margin on <body> on mobile devices using Bootstrap
I'm working on a site using the Bootstrap framework and noticed that on mobile devices there's an empty white margin on the right hand side of the window. I believe this is some sort of issue with the tag although I can't pinpoint it.
There are 20px margins but if I remove them the .brand logo shifts partially off the screen on the right hand side.
You can view the problem here.
Sorry to not provide the code here. I'm just not even sure which CSS to provide as I can't identify the problem.
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!
- ASCII 3D Text looks glitchy when used for a HTML Website
- table with sticky header and horizontal scroll
- CSS: 100% width or height while keeping aspect ratio?
- move words into a specific area
- How to set min width on content but still never exceed parent container width
- jQuery button click not showing/hiding content
- How do I auto scroll in Angular?
- How to remove lines between cells in Material UI Table
- Adding doctype for html5 (or any doctype) breaks my site
- Setting the background of an input element as a combination of three colors
- CSS :after or :before reading dynamic values from HTML. No JS. Pure CSS
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How to Apply Background Color for Children in a Repeating Pattern (Blue, Purple, Red)
- Text cropping when using overflow: hidden
- How to Position an Image on Different Sides of a Container Using CSS?
- How remove border around image in css?
- TailwindCSS: SVG icon won't resize properly
- Float CSS attribute causing parent div not to inherit height?
- Refused to apply inline style because it violates Content Security Policy (using hash for JQuery inline style)
- Show text outside the div with clip-path
- Flask/Jinja content not centering
- How to create a scalable document element inside a container in HTML
- Custom directive and [ngClass] on same element does not work
- How to add Font Awesome icon into <input> button?
- I can't set text after modifying the text
- Convert RGB color to English color name, like 'green' with Python
- Change / Hack style of Facebook 'Like it' button
- Selector :last-child not working as expected?
- Why does this strange space start appearing at the bottom of the page only on mobile?