I'm creating a website (and I'm a noob at this). I'm working on the functionality portion of design and i'll have someone do graphics later.
Currently when it goes into responsive (mobile view) it leaves a 2px margin on the right that is movable on a mobile browser (and scrollable). I can't for the life of me get rid of that.
if I turn on overflow-x: hidden, then it does become non scrollable but still movable.
I want that extra space to go away. I don't see it defined as padding in any of the css.
Using Bootstrap 2.3
Bootstrap is built on responsive 12-column grids, layouts, and components.
The row-fluid and span classes are old Sitecore CSS classes that help define rows and columns on the page. Bootstrap 5 instead uses row and col classes to define layout. The advantage to Bootstrap's CSS library is that you no longer need to define a new <div> for each row.
Scaffold is a modern and fresh HTML website template built with bootstrap framework. It's awesome and creative responsive HTML5 template created for business, corporate, portfolio, startup and agency websites. It is a very simple, clean and professionally for showcasing your work or services.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Solved by adding this to my custom css:
html, body {
width: auto !important;
overflow-x: hidden !important;
}
Note: the !important is only being used so it takes priority over other CSS. Most instances will not need !important
if you load your custom CSS after your bootstrap CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With