CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrapgrid-system
jeris97
jeris97

Reputation: 17

Hide div code (not the div itself) on bootstrap small screen

I'm using angularjs combined with ui bootstrap and ngSticky modules to code a web app.

I don't want ngSticky to work a div on bootstrap's small screen. Is there any way I can make the sticky offset="65" of the div code below disappear on small or mobile screens? Thanks so much in advance!

<div sticky offset="65">

Upvotes: 0

Views: 194

Answers (2)

Sofre Garevski
Sofre Garevski

Reputation: 64

Maybe @media css rule can help in this situation. The solution would be:

@media (min-width: 768px) {
  .stickyClass {
    offset:65px !important;
  }
}

This means that stickyClass will be applied for screen sizes bigger than 768px. You can see this in action here

Upvotes: 0

lostintranslation
lostintranslation

Reputation: 24563

You can use bootstrap responsive-utilities:

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

Make a couple of divs:

<!-- this one is visible on larger devices and up and contains sticky attribute -->
<div sticky offset="65" class="hidden-xs">

<!-- this one is visible on small devices and up with no sticky attribute -->
<div offset="65" class="visible-xs-block">

Upvotes: 1

Related Questions