Turning two sections into one using media query

Question

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;   
            }
        }

There's an option that turns both sides of each section into a fullwidth section. [Demo here](http://alvarotrigo.com/multiScroll/extensions/responsive-expand.html). — Alvaro, Apr 24 '17 at 11:58

score 3 · Accepted Answer · answered Nov 21 '14 at 19:09

3

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/

answered Nov 21 '14 at 19:09

emmanuel

9,607
10
25
38

Could you also tell me how to change the media query, if I would like the section 1 right to be displayed and then section 2 left and so on? – Schwesi Nov 21 '14 at 19:19
There is another problem. The scroll direction is reversed. If I scroll down the content comes from the top... – Schwesi Nov 21 '14 at 19:28
This media query update width of sections to `100%` for the specified width. – emmanuel Nov 21 '14 at 19:36
I see. But why does my media query not work then? I updated the question. – Schwesi Nov 21 '14 at 19:53
1

Checked the code and I see that it scrolls to the elements of the same section. You could add `.ms-right { display: none; }` to scroll to the left contents instead of right. – emmanuel Nov 22 '14 at 08:47

Turning two sections into one using media query

1 Answers1