Schwesi Schwesi - 4 years ago 120
Sass (Sass) Question

Turning two sections into one using media query

I am using the multiscroll.js jquery plugin (https://github.com/alvarotrigo/multiscroll.js).

It works great. However, at a certain browser width it breaks down. So I would like it to be 'disabled' and just show one side of each section after a certain browser width.


Like on this page for example:

http://www.reverzo.tymberry.com/


Here is the fiddle: http://jsfiddle.net/929u1za0/


My pathetic attempt:

HTML

<div id="myContainer">

<div class="ms-left">
<!-- Section 1 left -->
<div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<h1>Section 1 left</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->

<!-- Section 2 left -->
<div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<h1>Section 2 left</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->
</div><!-- /.ms-left -->

<div class="ms-right">
<!-- Section 1 right -->
<div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<div class="ms-section-content">
<h1>Section 1 right</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->

<!-- Section 2 right -->
<div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<h1>Section 2 right</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->
</div><!-- /.ms-right -->
</div><!-- #myContainer -->


CSS

/**
* multiscroll 0.0.6 Beta
* https://github.com/alvarotrigo/multiscroll.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
.ms-section {
position: relative;
@include box-sizing(border-box);
}

.ms-section.ms-table{
display: table;
width: 100%;
}

.ms-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}

.ms-easing {
@include transition(all 0.7s ease-out);
}

/* Custom styles */
.ms-section {
text-align: center;
}

/* The media query */
@media screen and (max-width: 700px) {
.ms-section section2 {
display: none;
}
}


I am thankful for any kind of help! Thank you!!

UPDATE:
Why does this not work to just show the left section1 and the right section 2?


@media screen and (max-width: 700px) {
.ms-left .section1,
.ms-right .section2 {
width: 100% !important;
}
}

Answer Source

You have to update media query to:

@media screen and (max-width: 700px) {
    .ms-left, .ms-right {
        width: 100% !important;   
    }
}

Fiddle: http://jsfiddle.net/929u1za0/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download