CODEWITHSUNDEEP
htmlcssresponsive-designbootstrap-4whitespace
flash
flash

Reputation: 1517

How to avoid white space in css/bootstrap in mobile view?

I have a screenshot as shown below which I have replicated in CSS/Bootstrap. It will look same both in mobile and desktop view.

enter image description here

I have created the fiddle for the upper portion of the screen-shot which has search-icon(at the extreme left) and ellipsis(at the extreme right).

I have also created the fiddle for the bottom portion of the screen-shot which has 2 rows and 4 columns.

The snippets of HTML code which I have used in order to make the row and search-icon are:

Row: 

 <tr>
     <th scope="col">Name</th>
     <th scope="col" class="number">Number</th>
     <th scope="col" class="table2">Table</th>
     <th scope="col" class="status">Status</th>
 </tr>

Search-form:

   <form class="back">
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search" class="extand ">
    </form>


Problem Statement:

The reason why I have created two separate fiddle because AS soon as I add the table row and column code(mentioned in the 2nd fiddle) on my pc, I am seeing the WHITE SPACE AT THE EXTREME RIGHT

MY QUESTION IS, on merging those 2 codes(from 2 separate fiddles) on my pc, somehow I am seeing the space at the extreme right on my pc on mobile view as shown below(marked with green arrow).

I am wondering, what changes I should make in the fiddles above so that I don't see any space at the right.

enter image description here

Upvotes: 1

Views: 302

Answers (2)

Ozan Ert&#252;rk
Ozan Ert&#252;rk

Reputation: 485

.table td.left {
     padding-right: 32%; 
}

this rule makes your table body overflow. It is not recommended that using padding on table contents. You could consider defining your table width at the beginning.

for example .table.td{ width:25%; padding:0px;}

Upvotes: 1

Barthy
Barthy

Reputation: 3231

You table simply isn't responsive. Bootstrap 4 provides utilities for responsive tables:

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}. […]

You can also find this example:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Upvotes: 3

Related Questions