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
Post a Comment