CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jrillo
jrillo

Reputation: 21

Active CSS property until window resize?

I'm pretty new to this so i'm sorry if it is an obvious one. I have two independently scrolling columns like this example here (imagine they work when there is enough content):

This fiddle might make it a bit easier to visualize than the code snippet below

.xo-scroll-col {
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    height: calc(100% - 120px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4 xo-scroll-col">
            one
        </div>
        <div class="col-md-8 xo-scroll-col">
            two
        </div>
    </div>
</div>

Once you resize the window enough, the "one" and "two" will stack on top of each other. I would like to have the "xo-scroll-col" css active until they stack, and then disable it.

Basically the idea here is to have them scrolling independently until they are stack as it is no longer needed at that point. Thoughts on how to do this?

Upvotes: 0

Views: 288

Answers (2)

Rhythm Ruparelia
Rhythm Ruparelia

Reputation: 667

I have mad a fiddle for you. Please check if this is what you need. Mainly two changes made in it.

1) First, height unit changed from % to vh
height: calc(100vh - 120px);

2) Second, added media-query for Bootstrap md size

@media (min-width:992px){
  .xo-scroll-col {
    top: 0;
    bottom: 0;
    overflow: auto;
    height: calc(100vh - 120px);
  }
}

Upvotes: 1

Peyman Salehi
Peyman Salehi

Reputation: 48

You can use jQuery $(window).resize and inside of it listen to $(window).width() and then use .addClass and .removeClass() OR put your .xo-scroll-col class inside of a @media (max-width: $media-sm){}.

Read more about Media query in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 1

Related Questions