Show div on only on mobile/tablet/desktop using weebly.com

Question

I want to show a specific div only on mobile that can't me seen on desktop and vice versa. This code should work but I can't seem to get this code to work using weebly.com

<style>

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}
</style>

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>

"This code should do what I want it to." What do you want it to do? What is it actually doing? You have not actually asked a question here. You need to provide more information. — randak, Aug 18 '14 at 02:27
I want to show a specific div only on mobile that can't me seen on desktop and vice versa. I can't seem to get this code to work using weebly.com @randak — Thomas, Aug 18 '14 at 02:33
You should keep in mind that your detection will for example display the text for a tablet or mobile on a narrow browser on a desktop. If you actually need to display content based on the way you described, the screen size checking is insufficient. You still haven't provided much to work with. I'm not sure that weebly has anything to do with it. Can you make a [JSFiddle](http://jsfiddle.net/) to demonstrate the problem? — randak, Aug 18 '14 at 02:35
I think it will make more sense through screenshots. In this first picture http://s13.postimg.org/q49xnrinr/desktop.png all 3 divs, desktop, mobile, and tablet, are visible. Only the desktop div (class one) should be visible. This second picture http://s13.postimg.org/zas8b1nw7/mobile.png Shows that only the mobile div class three is shown. That is good. So I need help fixing this code so that the desktop view only shows class one, not class one, two and three, like it does currently. @randak — Thomas, Aug 18 '14 at 02:47
Just use javascript to check if using a mobile and un-hide the div. use css (display none) for the divs -- http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery — Tasos, Aug 18 '14 at 03:17
@thomas. I think there is the issue in resolution for the desktop. Please set min and test with somewhat changing the value. — Janty, Aug 18 '14 at 03:29

score 0 · Answer 1 · edited Dec 08 '15 at 14:50

Your code is totally fine. Tried the same on JsFiddle.It Works

Resize the window and test it for various resolutions.

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>

Show div on only on mobile/tablet/desktop using weebly.com

1 Answers1