Bootstrap right white space on mobile

Hi, I’m new to bootstrap and I’ve made this page just recently to practice and learn bootstrap: bs.eslaah.ir
It looks fine on my laptop but when I open it on my mobile device it has a white space on the right side of it, unfortunately I’m not able to inspect elements on my mobile as it’s possible on chrome on laptop (or other browsers). Would you please take a look at it and tell me what’s causing the issue? I added overflow-x: hidden: to the body and html elements and it didn’t work either. TYIA.

Hi,

If you are talking about 15px of whitespace to the right of your layout then that’s probably because you did not obey the bootstrap grid rules.

When you specify a row then it must immediately be followed by a column and when you nest a row it must be an immediate child of a column as per the bootstrap documentation.

The 15px of space is the negative margin cause by the following html where you have nested one row inside another row resulting in two 15px negative margins stretching out of the viewport.

<div class="row">
  <p class="col-lg-12 col-md-12 col-sm-12">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna int foo(){return bar();} enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue int foo(int x){ ...; } nulla facilisi.</p>
  <div class="row">
    <button class="btn btn-success strch-btn-rl-20" style="margin-bottom: 3px;">دانلود با لینک مستقیم</button>
  </div>
  <button class="btn btn-yellow">دانلود با لینک غیرمستقیم</button>
</div>

Rows have negative margins which flow into the padding of the container class or the column class both of which have 15px padding to offset the negative margin. If you nest two rows together then you extend out of the viewport and will cause a scrollbar on desktop or whitespace on mobile.

This may not be the problem you were talking about but does need to be rectified by following the bootstrap documentation correctly.

1 Like

Thank you Paul once again. This has solved my problem completely. I really don’t know from where I should start and read a documentation when I face a problem like this. But it seems that it’s an invaluable habit to have.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.