CODEWITHSUNDEEP
htmlbuttonmedia-queries
JEricaM
JEricaM

Reputation: 824

Change HTML on mobile/tablet device

I have button 1 and button 2. I have to show button 1 if I am in a computer screen, instead, I have to show button 2 if I'm in mobile/tablet devices. So, I want that something that can change the visible html in my page. There is something like mediaquery for html? Thank you in advance!

Upvotes: 1

Views: 4725

Answers (2)

aup
aup

Reputation: 810

Yes, media-queries could be used to get the result you want. But you use them in your css-style sheets.

Something like this:

@media only screen and (max-width : 480px) {
  .btn-mobile-visible {
      visibility: visible;
  };

  .btn-desktop-visible {
      visibility: hidden;
  };    
}

@media only screen and (min-width : 481px) {
  .btn-mobile-visible {
      visibility: hidden;
  };

  .btn-desktop-visible {
      visibility: visible;
  };   
}

And then in your html you just add the css-classes on you buttons:

<button class="btn-desktop-visible">Visible in desktop</button>
<button class="btn-mobile-visible">Visible in mobile</button>

Unwanted side effects could be if the user changes the size of his/hers browser window - that would probably make things a little messy :)

Upvotes: 4

k-nut
k-nut

Reputation: 3575

You can simply change the visibility of your buttons with css media queries. Or use a library like head.js to determine what kind of browser you are on and then insert the correct button via javascript.

Upvotes: 0

Related Questions