CODEWITHSUNDEEP
csstwitter-bootstrap
ipiyale
ipiyale

Reputation: 67

White Space Right Side of Bootstrap Website

I've been trying all kinds of solutions listed on StackOverflow to solve this problem but can't seem to get it right. There is white space on the right side of our website in the mobile view.

Any tips? Thank you so much. Been stuck for hours.

http://www.hackerparadise.org

Upvotes: 2

Views: 6948

Answers (4)

Sohan Arafat
Sohan Arafat

Reputation: 93

This problem can be solved by putting your row classed div inside a container class.

<div class="container">
 <div class="row">
  <!--Your columns here>
 </div>
</div>

The problem is when we use a row without a container it makes it looks like that.

Upvotes: 0

Bosc
Bosc

Reputation: 1509

In your A Day in the life and Our story sections you have 2 row classes, these need to be deleted.

<div id="day">
  <div class="container">
    <div class="row centered" style="padding-bottom: 20px;">
      <h1>A Day in the Life</h1>
      <div id="day-images" class="row"> <-- delete extra row here
        <div class="col-md-10 col-md-offset-1">

        </div>
      </div>
      <div class="col-md-8 col-md-offset-2" align="left">
        <p class="lead">All structure is optional at Hacker Paradise, so you can find a rhythm that works for you. Here is a sample day in the life:</p>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">

          </div>
        </div>
      </div>
    </div><!--/row-->
  </div><!-- /container -->
</div>


<section id="about">
  <div class="container pb">
    <div class="row">
      <div class="row centered"> <-- delete extra row here
        <h1>Our Story</h1>
        <div class="col-md-8 col-md-offset-2" align="left">

        </div>

        <br>
        <div class="col-md-8 col-md-offset-2" align="left">

        </div>
          <br>
        </div>
      </div><!--/row-->
    </div>

</section>

Upvotes: 1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Most of the problems I can see is on your bootstrap structure. You are adding additional row without adding another div with a grid class e.g col-md-*

Sample:

<div class="container">
    <div class="row"> 
        <div class="row"> <!-- additional row -->
            <div class="inner-div">
                Inner Div
            </div>    
        </div>
    </div>
</div>

A clear problem is visible in this fiddle when you scale down your browser.

Solution:

Before adding another row class element you must add first an element which has a grid class

<div class="container">
    <div class="row">
        <div class="col-md-12"> <!-- DIV with a grid class -->
            <div class="row">
              <div class="inner-div">
                Inner Div
              </div>    
            </div>    
        </div>
    </div>
</div>

You can see it's fixed on this fiddle

In your case I can see the problems under #day and #about elements.

Under #day:

enter image description here

Under #about:

enter image description here

Also the other problem is on the css. Add this to your css:

.btn-design {
   margin-left: 0;
   margin-right: 0;
}

Upvotes: 3

Pouya Ataei
Pouya Ataei

Reputation: 2169

I've added : 

 html  {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 

}

Into your CSS at the very top above the other classes and it seemed to fix your issue.

Upvotes: 5

Related Questions