CODEWITHSUNDEEP
htmlcssbuttonresponsive-designmedia-queries
jcooke.mn
jcooke.mn

Reputation: 21

Resize div in media query

I've been having a really hard time figuring out why this doesn't work. I have this button as a that won't switch to 100% width on mobile. It works when I set it to a tag but then my css animation on hover doesn't work...

Just need to figure out how to get the div to take up 100% of the screen at mobile size. (jsfiddle here if you prefer to use that)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      display: inline;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        width: 100%;
        margin: 0;
        color: #000
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

Upvotes: 2

Views: 2755

Answers (4)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Display inline on your btn class is causing the problem. Also add box-sizing: border-box to all elements.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    body * {
        box-sizing: border-box;
     }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      display: inline;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        display: block;
        width: 100%;
        margin: 0;
        color: #000
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

Upvotes: 0

Ryan
Ryan

Reputation: 133

Try adding

display:block;

to your media query

Displaying an element as inline will make it so that any height and width properties have no effect.

Upvotes: 0

Johannes
Johannes

Reputation: 67748

The button is an inline element on which which won't have any effect. Add display: inline-block; or block to its CSS rule in the media query to avoid that.

(And also add box-sizing: border-box; to prevent it from going out of its container)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      display: inline;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        width: 100%;
        margin: 0;
        color: #000;
        display: inline-block;
        box-sizing: border-box;
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

Upvotes: 0

Zach Voss
Zach Voss

Reputation: 89

You must set the button css to 

display: block;

in the media query. Otherwise the 

display: inline;

will keep it from being 100% width

Upvotes: 1

Related Questions