button - Change HTML on mobile/tablet device -
button - Change HTML on mobile/tablet device -
i have button 1 , button 2. have show button 1 if in computer screen, instead, have show button 2 if i'm in mobile/tablet devices. so, want can alter visible html in page. there mediaquery html? give thanks in advance!
yes, media-queries used result want. utilize them in css-style sheets.
something this:
@media screen , (max-width : 480px) { .btn-mobile-visible { visibility: visible; }; .btn-desktop-visible { visibility: hidden; }; } @media screen , (min-width : 481px) { .btn-mobile-visible { visibility: hidden; }; .btn-desktop-visible { visibility: visible; }; } and in html add together css-classes on buttons:
<button class="btn-desktop-visible">visible in desktop</button> <button class="btn-mobile-visible">visible in mobile</button> unwanted side effects if user changes size of his/hers browser window - create things little messy :)
html button media-queries
Comments
Post a Comment