CODEWITHSUNDEEP
htmlcssmedia-queriescss-grid
Swetha Lakshmi
Swetha Lakshmi

Reputation: 23

media queries not working on mobile screen size

I have created a single-price-component using grid layout. For the mobile screen of 375px, I want the grid layout to become a single to become 2 rows of two divs instead of one column with two divs. The media queries I set for the mobile is not working to display the expected results.

HTML CODE: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
  <title>Frontend Mentor | Single Price Grid Component</title>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="box1">
      <h2>Join our community</h2>
      <h3>30-day, hassle-free money back guarantee</h3>
      <p>Gain access to our full library of tutorials along with expert code reviews.<br> 
      Perfect for any developers who are serious about honing their skills.</p>
    </div>
    <div class="grid">
    <div class="box2">
      <h3>Monthly Subscription</h3>
      <div><span class="big">$29</span><span class="light">per month</span></div>
      <p>Full access for less than $1 a day</p>
      <input type="submit" value="Sign Up" class="submit">
    </div>
    <div class="box3">
      <h3>Why Us</h3>
      <ul class="light">`enter code here`
        <li>Tutorials by industry experts</li>
        <li>Peer &amp; expert code review</li>
        <li>Coding exercises</li>
        <li>Access to our GitHub repos</li>
        <li>Community forum</li>
        <li>Flashcard decks</li>
        <li>New videos every week</li>
      </ul>
    </div>
    </div>
    </div>
    </div>
  </body>
</html>

CSS STYLES :

body,html {
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 16px 'Karla', sans-seriff;
}

.container { max-width: 1440px; }

.row {
  width: 50%;
  height: 50%;
  margin: 110px 0 0 350px;
  border-radius: 10px;
  box-shadow: 0 0 0 10px hsl(204, 43%, 93%);
}

.box1 { padding: 15px 10px 15px 30px; }

h2 { color: hsl(179, 62%, 43%); }

.box1 h3 { color: greenyellow; }

.box1 p { 
  line-height: 25px;
  color: hsl(218, 22%, 67%);
}

.grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr) ;
  text-align: left;
  color: hsl(204, 43%, 93%);
}

.box2 {
  background-color: hsl(179, 84%, 27%);
  border-bottom-left-radius: 10px;
  color: white;
  padding-left: 35px;
}

.box2 h3 { padding-top: 10px; }

.big {
  font-size: 30px;
  padding-right: 15px;
}

.light { opacity: 80%; }

.box2 p { margin-bottom: 22px; }

.submit {
  background-color: greenyellow;
  border: none;
  padding: 10px 95px;
  color: yellow;
  font-weight: 700;
  margin-bottom: 30px;
  border-radius: 7px;
  box-shadow: -10px -10px 7px 10px hsl(179, 84%, 27%),
  10px 10px 7px 10px hsl(179, 84%, 27%);
}

.submit:hover { background-color:rgb(141, 223, 19); }

.box3 {
  background-color: hsla(179, 85%, 33%, 0.918);
  border-bottom-right-radius: 10px;
  color: white;
}

ul { list-style: none; }

.box3 h3 { margin-left: 40px; }

/*----------MEDIA QUERIES----------*/

@media only screen and (max-device-width: 375px) {
  .grid div {
    display: grid;
    grid-template-columns: 1fr;
  }
}

It should look like this on mobile

Upvotes: 2

Views: 624

Answers (3)

Bibek Shakya
Bibek Shakya

Reputation: 151

Use this code and it will be exactly like the image file you shared.

@media only screen and (max-width: 375px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .container {
    padding: 25px;
  }

  .row {
    margin: 0;
    width: 100%;
  }
}

Upvotes: 0

Jeffrey Lan
Jeffrey Lan

Reputation: 92

Continuing off from the answer by @snoh666, there isn’t such thing as max-device-width. The correct way to write it is max-width.

Upvotes: 2

snoh666
snoh666

Reputation: 139

Thing is that you are referencing div inside .grid instead of changing the grid layout. You're making new one in this .grid component.

@media only screen and (max-width: 375px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

And I would rather use max-width instead of max-device-width.

max-width is the width of the target display area, e.g. the browser max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.

Upvotes: 3

Related Questions