media queries not working on mobile screen size

Question

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

score 3 · Answer 1 · answered Jan 08 '20 at 15:32

3

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.

answered Jan 08 '20 at 15:32

snoh666

129
1
6

i changed the max-device-width to max-width and created the grid layout in .grid with grid-template-columns; 1fr. But still nothing changes in the browser view. Any style that i mention in media queries is not applying in the browser output. – Swetha Lakshmi Jan 09 '20 at 17:02
@SwethaLakshmi Are you sure then browser width is smaller than 375px? – snoh666 Jan 09 '20 at 18:16
@SwethaLakshmi I created previously codepen you can check what i did there maybe that will help you with fixing https://codepen.io/snoh666/pen/NWPyJvG – snoh666 Jan 09 '20 at 18:20
@SwethaLakshmi if you're still having trouble fixing this. Just hit me up on my mailbox. You can find it via profile>portfolio ;) – snoh666 Jan 13 '20 at 23:16

score 2 · Answer 2 · answered Jan 08 '20 at 15:34

2

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.

answered Jan 08 '20 at 15:34

Jeffrey Lan

90
13

1

As additional note, device-width and variations are deprecated. – Ozan Ayten Jan 08 '20 at 15:40
@OzanAyten How come still works? – Jeffrey Lan Jan 08 '20 at 15:54
That value is used for specificly controlling the scaling of viewport and its a html option, not css for all I know. Also, for more information you can check the accepted answer in: https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width – Ozan Ayten Jan 08 '20 at 18:24
change it so that the element (grid) is before the .div, so like this: “ @media only screen and (max-device-width: 375px) { div.grid { display: grid; grid-template-columns: 1fr; } }”. Hope this helps – Jeffrey Lan Jan 10 '20 at 03:26
Sorry, I meant element before class. – Jeffrey Lan Jan 10 '20 at 14:25

score 0 · Answer 3 · answered Jan 08 '20 at 15:44

0

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%;
  }
}

answered Jan 08 '20 at 15:44

Bibek Shakya

151
2

I tried it but it didn't work . Any style that I mention in the media queries is not working on the browser output – Swetha Lakshmi Jan 09 '20 at 17:07
Would you mind sharing me the latest CSS file that you are using? I can have a look why it is not working even when you have used 'max-width' – Bibek Shakya Jan 10 '20 at 11:11
Yeah but would you tell me how to share a file from one user to another. I'm new here so I don't know how to do that. – Swetha Lakshmi Jan 12 '20 at 06:33
You can add all your codes in: https://codepen.io/. Here you can add HTML, CSS, JS, SCSS and many more with live preview. – Bibek Shakya Jan 14 '20 at 10:58

media queries not working on mobile screen size

3 Answers3

Linked