html - media query non responsive -


ok have not used media query time believe have done correctly. not using sass or less plain old css.

.btn-test {     border-radius: 2px;     border: 1px solid #2e70a4;     color: #fff;     font-size: 12px;     background: #2c83c9;     position: relative;     transition: .2s ease;     display: inline-block;     text-decoration: none;     margin: 18px 9px 0 0;     padding: 5px 9px 0 9px;     height: 37px;     line-height: 16px;     text-align: center; }   @media screen , (min-device-width: 850px) , (max-device-width: 1050px) {     .btn-test {         line-height: 34px;         font-size: 8px;     }      .arrow-call-to-action {         font-size: 8px;     }      .call-to-action-list p {         font-size: 8px;     } } 

so set screen 900 media query should active, see no change, have done correctly ?

thanks.

update html added

 <li>                 <div class="t4 arrow-call-to-action">                     somthing                 </div>                  <div class="t5">                     <p>text                         <br>more text<br>                     </p>                 </div>                  <div class="t6">                     <a href="#" class="btn-test"                        id="some-tracking-id">buy                     </a>                 </div>             </li> 

use min-width , max-width if want test resizing browser window. min-device-width not affected resize because device not changing size.


Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -