Hide <div> elements depending on page size

1 Views

I’m making a website (using WordPress), and I inserted two bars by the side on my slider. The problem is: when the page is too small, the two bars are going over and under the slider. I would like to just make them disappear when the browser page in smaller than 1220px.

Here is the code of my slider (and the two bars). It is located in my Header.php file:

Read More
<div style="text-align: center; margin-bottom:20px;">

    <div id="bar" style="height:420px; width:6px; display:inline-block;">
        <img src="http://e404.ca/wp-content/uploads/SliderBar.png">
    </div>

    <div style="margin-left:auto; margin-right:auto; height:420px; width:1200px; display:inline-block;">
        <?php layerslider(1, 'homepage'); ?>
    </div>

    <div id="bar" style="height:420px; width:6px; display:inline-block;">
        <img src="http://e404.ca/wp-content/uploads/SliderBar.png">
    </div>

</div>

Basicly, I want the two with “bar” as ID to disappear when page is smaller than 1220px.

I would like a solution which work without jQuery. My website, if you want to take a look a the slider is : http://e404.ca

Hope you can help…!

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. This should do the trick, put on you css:

    @media screen and (max-width: 1220px) {
    #bar{display:none;}
}

    And another thing, never use the same ID to different elements, use class instead.

  2. You Can use jScroll in J Query. Its actually a plug-in for lazy loading.

    At first it only loads the front view. ie the content that you can see at first and as you scroll down the rest of the content is loaded.

    Look Here for the plugin.

  3. You won’t require Javascript for this.
    Have a look on this article as it has all the information you will require.
    Basically you will apply different CSS depending on the browser’s size.

    <link rel='stylesheet' media='screen and (max-width: 1220px)' href='css/medium.css' />

    The above for example will load only if the browser width is smaller than 1220.
    In this css you can have a rule to make the div disappear like:

    #bar {display:none; }

    I wouldn’t advise you to user one CSS for everything because as your website grows bigger it will get quite hard to manage it. Multiple CSS files for different resolutions will make your life easier in the future.

    Hope this helps