css - Show div on only on mobile/tablet/desktop using weebly.com -
i want show specific div on mobile can't me seen on desktop , vice versa. code should work can't seem code work using weebly.com
<style> @media , (max-width: 959px) { .content .one{display:block;} .content .two{display:none;} .content .three{display:none;} } @media , (max-width: 720px) { .content .one{display:none;} .content .two{display:block;} .content .three{display:none;} } @media , (max-width: 479px) { .content .one{display:none;} .content .two{display:none;} .content .three{display:block;} } </style> <div class="content"> <div class="one">this content desktop</div> <div class="two">this content tablet</div> <div class="three">this content mobile</div> </div>
your code totally fine. tried same on jsfiddle.it works
resize window , test various resolutions.
@media , (max-width: 959px) { .content .one{display:block;} .content .two{display:none;} .content .three{display:none;} } @media , (max-width: 720px) { .content .one{display:none;} .content .two{display:block;} .content .three{display:none;} } @media , (max-width: 479px) { .content .one{display:none;} .content .two{display:none;} .content .three{display:block;} }
<div class="content"> <div class="one">this content desktop</div> <div class="two">this content tablet</div> <div class="three">this content mobile</div> </div>
Comments
Post a Comment