CODEWITHSUNDEEP
cssmobiletwitter-bootstrap-3
Bangyou
Bangyou

Reputation: 9816

Bootstrap 3 Apply different CSS on Mobile and computer

I am using a bootstrap 3, have an div element with class outer and want to apply different css on mobile and computer.

For example, this is my css codes:

/* for computer */
div.outer {
     height: calc(100vh - 80px);
     padding: 0;
     margin: 0;
     min-height: 500px
}


/* for mobile */
div.outer  {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}

How do I implement it? Thanks for any suggestions.

Upvotes: 1

Views: 1949

Answers (3)

Anil wagh
Anil wagh

Reputation: 273

Use media query for mobile devices. below is template, dont forgot to add mobile meta tag.
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 570px)
  and (-webkit-min-device-pixel-ratio: 2) {
     //your css for mobile is here
}

Upvotes: 2

claudios
claudios

Reputation: 6656

I would recommend using media queries for this one. To change the div.outer class when in mobile use the code below.

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  div.outer  {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
 }
}

More media queries here

Upvotes: 2

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

For mobile you have tp define width of the device in '@media' queries.

767px is a standard width of screen for mobile and tablets. So you can use like this

@media all and (max-width:768px){
    // your css for mobile
}

This css will apply only when you device width will be 768px or less

Upvotes: 1

Related Questions