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>