Bootstrap 2.3 CSS Responsive left with a white space on the right


Bootstrap 2.3 CSS Responsive left with a white space on the right



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





I've encountered the same problem, it had something to do with the navbar.
– Pier-Luc Gendreau
Jun 9 '13 at 1:24




6 Answers
6



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.


!important





for other's references: you don't neccesarily need to add !important if you do not override this anywhere else.
– IkegawaTaro
Sep 18 '13 at 3:36


!important





This makes the scroll bar disappear but, unless it's just me, if you click and drag a selection to the right you can see that the gap is still there. Doesn't seem like a real fix. I've always noticed that damn gap when using Bootstrap... don't think I've ever found a perfect solution :/
– Zuko
Jan 2 '14 at 8:04





I think it only applies to you because the gap on my page is gone!
– ILikeTacos
Aug 7 '14 at 21:35





A million thanks, this totally solved my problem
– aokelly
Oct 2 '14 at 15:43





You saved me from death. Thanks
– Preethi Kumar
Jun 8 '16 at 12:38



I know I'm super late to the game here but I figured out why this happens in the first place.
If you're using a navbar, there's some extra padding in the navbar-right element that shouldn't be there. It has a margin-right of 15px that causes this gap. Overwrite it and problem solved!





She is right. This is much better solution than the one that is accepted and have million upvotes.
– Goran
Oct 22 '15 at 14:10



Replace .container class with .container-fluid in body and in your .css file make the padding right and left : 0px;
That's it.


.container


.container-fluid


padding right and left : 0px;





Thanx ann for editing my post.
– Nilesh
May 4 '16 at 10:45



I have tried doing this, but it worked only on browser based mobile emulators. It also works nicely when I resize my browser.



But, when I check it on my phone - Samsung Galaxy S2 & iPhone 5, it still shows me the white space.



I also tried:


@media handheld and (max-width: 481px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}

@media handheld and (max-width: 380px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}





If you're using bootstrap 3.x, then no... this is the wrong solution... one of your containers isn't really "contained".
– Xogle
May 14 '15 at 19:01



Remove margin-left, margin-right



And change


<div class="navbar">
<div class="navbar-inner navbar-fixed-top">



to


<div class="navbar navbar-fixed-top">
<div class="navbar-inner">`





That seemed to make things worse while resizing and no change in the end result
– Andrew
Jun 9 '13 at 1:37





I think I saw navbar-inner's margin-left, margin-right set to -20px, then they disappeared
– patnav
Jun 9 '13 at 2:10





actually the screen is still movable to the side on a mobile device. so now we have 2 issues instead of one
– Andrew
Jun 9 '13 at 2:13






I've done some manual adjustments on the css and still have like a 2px white space on the right side. even though everything is declared a min of 385 (html, body, nav, etc)
– Andrew
Jun 9 '13 at 2:33





It's working perfectly on the iPhone for me.
– ralph.m
Jun 9 '13 at 2:44



I solved this by simply wrapping the .row in another .container-fluid class element. This should take care of the margin.





This was for bootstrap 2.x, you're referring to bootstrap 3.x which out of the box works a lot better
– Andrew
Oct 1 '14 at 21:15






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

api-platform.com Unable to generate an IRI for the item of type I'm trying to setup my first api-platform instance and have run into some presumably noob questions around IDE. What i'm trying to do is setting up an register and reset entity in order to deal with registrations and password reminders from an app. And then have the entity's passed to a custom controller to do some checks, balances and mails afterwards (haven’t gotten around to that yet). But I keep running into this error when posting to my custom entities: { "@context": "/api/contexts/Error", "@type": "hydra:Error", "hydra:title": "An error occurred", "hydra:description": "Unable to generate an IRI for the item of type "AppXXXUserBundleEntityRegister"", "trace": [ { "namespace": "", "short_class": "", "c
Read more

How to set up datasource with Spring for HikariCP?

How to set up datasource with Spring for HikariCP? Hi I'm trying to use HikariCP with Spring for connection pool. I'm using jdbcTempLate and JdbcdaoSupport. This is my spring configuration file for datasource: <bean id="dataSource" class="com.zaxxer.hikari.HikariDataSource"> <property name="dataSourceClassName" value="oracle.jdbc.driver.OracleDriver"/> <property name="dataSource.url" value="jdbc:oracle:thin:@localhost:1521:XE"/> <property name="dataSource.user" value="username"/> <property name="dataSource.password" value="password"/> </bean> But unfortunately the following error message is generating: Cannot resolve reference to bean 'dataSource' while setting bean property 'dataSource'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataSource'
Read more

Display dokan vendor name on Woocommerce single product pages

Display dokan vendor name on Woocommerce single product pages With woocommerce I am using Dokan plugin and I am trying to display the vendor name, rating and vendor location on single product pages. I tried this code to display vendor name but no luck: //show store name add_action( 'woocommerce_single_product_summary', 'show_store_name', 20 ); function show_store_name() { printf( '<b>Seller Name:</b> <a href="%s">%s</a>', dokan_get_store_url( $author->ID ), $store_info['store_name'] ); } Any help is appreciated. 1 Answer 1 I don't use dokan plugin. Here is the way to get the (post) author ID and to make your code work: add_action( 'woocommerce_single_product_summary', 'display_author_name', 20 ); function display_author_name() { // Get the author ID (the vendor ID) $vendor_id = get_post_field( &#
Read more