CODEWITHSUNDEEP
jqueryhtmlcssmobile
vijay kumar
vijay kumar

Reputation: 377

Hide and show a div based on mobile browser and desktop browser

I divided my content in to two div's left one is for qty,price,item name and right div is for product names.

now i want display left div in mobile browsers by hiding product names div and in desktop browsers i want to show both.

screen

Upvotes: 0

Views: 971

Answers (2)

Ravish
Ravish

Reputation: 2421

If you are using Bootstrap, you can check it's responsive classes to show/hide different elements on Mobile/Desktop, here:

http://getbootstrap.com/css/#responsive-utilities

If you are not using bootstrap or any other library that has such help classes built-in, then you need to write your own media query, something like:

CSS:

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .price, .left-div { display: none; }   
}

HTML:

<div class="container">
  <div class="left-div"> TEXT TEXT</div>   
  <div class="price"> $49</div>
</div>

Upvotes: 1

jsg
jsg

Reputation: 1264

You can do this by using a media query

@media (max-width:767px){
    .whatever{display:none;}
}

Upvotes: 0

Related Questions