Html Question posted in
Some basic documentation can be found here.

Html – How do I get @media screen to scale down my button?

I have a button that has a width of 300px and a height of 130px. I want the button to scale down with the page as you change the size of the browser. When I added @media screen and made the max width 375px, about the screen size of an iphone, the button remained the same size. Can anyone help?

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  top: 51%;
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateY(10px);
}

.stroke {
  z-index: 2;
  position: absolute;
  width: 300px;
  height: 130px;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
  top: 51%;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.20);
  }
}

@media screen and (max-width:375px) {
  #button {
    width: 100px;
    height: 60px;
  }
}
<div class="parent">
  <button id="button"></button>

  <div class="stroke"></div>
</div>
Tags:

2

Answers


  1. 0

    Testing your code, the button does get smaller at <375px, although your stroke effect styled onto your div does not.

    A quick and easy fix would be to add .stroke to your CSS within the media-screen tag.

    * {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  top: 51%;
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateY(10px);
}

.stroke {
  z-index: 2;
  position: absolute;
  width: 300px;
  height: 130px;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
  top: 51%;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.20);
  }
}

@media screen and (max-width:375px) {
  #button,
  .stroke {
    width: 100px;
    height: 60px;
  }
}
    <div class="parent">
  <button id="button"></button>

  <div class="stroke"></div>
</div>
    Login or Signup to reply.
  2. 0

    You can avoid the whole hassle by using a pseudo-element (::after) rather than additional markup. It’ll automatically follow the button size. You could also set the button size itself to a dynamic value (vw, vh, %, rem) to make it infinitely resizable instead of using media queries.

    * {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  /* top: 51%; */
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateY(10px);
}

#button::after {
  content: '';
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.20);
  }
}

@media screen and (max-width:375px) {
  #button {
    width: 100px;
    height: 60px;
  }
}
    <div class="parent">
  <button id="button"></button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search