Bootstrap 3 Apply CSS on Mobile View Only

Bootstrap 3 Apply CSS on Mobile View Only

Just use the appropriate media queries in your CSS, eg

@media (max-width: 767px) {
    /* CSS goes here */
}

Bootstrap defines the following widths

• Extra small devices (phones, less than 768px)
• Small devices (tablets, 768px and up)
• Medium devices (desktops, 992px and up)
• Large devices (large desktops, 1200px and up)

See http://css-tricks.com/css-media-queries/ for some more information on media queries.

Bootstrap 3 Apply different CSS on Mobile and computer

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
}

How to make view responsive to mobile devices with bootstrap 3

You are only using COL-SM which only effects small screens. You need to add the class "col-XS" to tell bootstrap what to do on extra small screens. By default it is "col-xs-12" which stacks.

Here is the fiddle I made for you. You can see on an extra-small screen size the "tiles" are going to show 2 to a row. because i gave them this class: Col-xs-6
https://jsfiddle.net/93bg9v2z/2/

edit: based on your request here is the new fiddle
https://jsfiddle.net/93bg9v2z/3/

Bootstrap 3 move position of divs on mobile

I believe you issue is du to the fact that Bootstrap is a mobile first framework, and you try to use it as a desktop first one.

You should place divs the way you want them to be displayed on a mobile, THEN pull/push them on larger screen :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">   <div class="container-fluid">    <div class="row">        <!-- LEFT ON DESKTOP -->        <div class="col-xs-12 col-sm-6 col-sm-push-6" id="recommend-container">        I'm on the right on desktop        </div>        <!-- RIGHT ON DESKTOP -->        <div class="col-xs-12 col-sm-6 col-sm-pull-6" id="register-section-container">        I'm on the left on desktop        </div>    </div></div>

Collapse only on Mobile View Bootstrap 3

Try to do like this http://jsfiddle.net/p6t3brob/15/

<div class="collapsed-item">
  <div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title

  </div>

  <ul class="item-description hidden-xs collapse" id="items">
    <li class="title">title-text</li>
    <li>item-item-item......</li>
    <li>item-item-item......</li>
    <li>item-item-item......</li>
    <li>item-item-item......</li>
  </ul>
</div>  

Increase Title Margin in Mobile view only

Just review the provided Test link, the issue is not related to Title or Responsive.

Actually margin-top: -60px!important; CSS added on .entry-content and margin-bottom: 65px; CSS on .entry-header.

Step 1:

Remove margin-top: -60px!important; CSS from .entry-content.

Step 2:

Change margin-bottom: 65px; CSS to margin-bottom: 0; on .entry-header.

Will resolve your issue on Both Desktop and Responsive versions. Thank You

How to detect ONLY with CSS mobile screens

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
    /* Styles */
}
    
@media only screen and (max-device-width: 768px) {
    /* Styles */
}

Earlier post:
How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

---

Related Topics