CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
ONE_FE
ONE_FE

Reputation: 1006

Setting the margin in a responsive layout

<div class = "row">
  <div class = "col-sm-12 header_site">
     <h1><span class = "header">ABC Company</span></h1>
  </div>
</div>

CSS Code:

.header_site{
background-color: darkblue;}
.header{
color: white;
margin: 0px 0px 0px 160px;}

In the mobile version the layout is as follows: enter image description here

Setting the margin-left: 160px is the problem. But I want the margin-right to be 160px in a desktop computer as follows. enter image description here

Upvotes: 0

Views: 53

Answers (4)

Shashank
Shashank

Reputation: 2060

Ideally, margin-left shouldn't create any problem, but even if it does, CSS has an alternative by using margin shorthand. For mobile and desktops, please find the code below:

.header_site{
background-color: darkblue;
}

.header {
color: white;
}

@media (max-width: 767px) { /*Targetting only mobile devices*/
.header {
    margin: 0 0 0 160px;
    }
}

@media (min-width: 1024px) { /*Targetting the desktops*/
.header {
    margin: 0 160px 0 0;
    }
}

Upvotes: 1

Voreny
Voreny

Reputation: 785

Use a media query. It should look like that:

.header_site{
background-color: darkblue;}
.header{
color: white;
margin: 0}

@media (min-width: 991px) {
    .header {
        margin: 0 0 0 160px;
    }
}

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

use the container class

<div class ="container">
  <div class = "header_site">
     <h1><span class = "header">ABC Company</span></h1>
  </div>
</div>

Upvotes: 0

Pepelius
Pepelius

Reputation: 1609

Your answer is using Media Queries in your CSS, or more preferably forget the left margin entirely and wrap your header content into a .container.

To do so, construct your HTML like following: 

<div class="header_site">
<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <h1><span class="header">ABC Company</span></h1>
      </div>
   </div>
</div>
</div>

Solve the issue by Media Queries:

Putting the following tags will keep the margin in Desktop view, but remove it once the screen is too small for it (or adjust the margin a bit lower at that point)

@media (min-width: 991px)
{
   .header { margin: 0 0 0 160px; }
}

You can set up multiple Media Queries in your CSS and combine min and max values like following:

@media (min-width: 768px) and (max-width: 991px)
{
   .header { margin: 0 0 0 80px; } /* Your margin is now smaller in tablet view, but returns to the 160 pixels in mobile, not ideal for your situation, but as an example! */
}

Upvotes: 1

Related Questions