0

My question is rather simple, I currently have this CSS for a simple button.

I would just like to know what I can input so that its width becomes 100% (instead of 33%) when a user is using their mobile device. (When their screens are at set at a certain width)

Thank you very much for your time!

button {
    text-align: left;
    display: inline;  
    font-size: 2vw;
    padding: 2em;
    margin-top: 0;
    width: 33%;
    height: 100%;
    background-color: #5e75b4;
    border: none;
}
Marik Ishtar
  • 2,899
  • 1
  • 13
  • 27
Stella Pangilinan
  • 1
  • 1
  • [Media queries guide](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) – DBS Jul 17 '20 at 10:39
  • Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – fuggerjaki61 Jul 17 '20 at 10:40
  • [There are a lot of questions on this and here on stackoverflow answering this](https://stackoverflow.com/questions/8564752/common-breakpoints-for-media-queries-on-a-responsive-site) – jbutler483 Jul 17 '20 at 10:42

1 Answers1

1

You can use mediaqueries for that.

As easy as adding to your css:

@media (max-width: XXXpx) { /*"xxx" the width of window*/
  button  {
    width:100%;
  }
}
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57