I am working through the Summer Nights CSS Grid Tutorial, No. 9: responsive pages. I have duplicated the body rule x 2, and set the media inquiries for XL and LG, leaving the final one is for SM with no media inquiry set. So far so good, but while the grid shows normally for XL and LG, I can not get anything for the Sm size. What am I missing? Thanks.
Are you able to post your code snippet? That would help for analysing.
Thanks for quick reply.
Try enclosing all your code within triple-tilde symbol 
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Blank Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap">
</head>
<body>
<img src="pine.sky.jpg" class="header-image img-fluid">
<div class="text">
<p>Pines are special. They're some of the oldest leaving beings on Earth. Did you know some Pine trees are more than 5000 years old - and still growing today?</p>
<p>We organize unique journeys throughout the world, visiting Pine trees on the way. No mountain is too high for us, no desert too dusty, no snow storm too cold. Our motto is: If Pine trees can survive there, so can we!</p>
<p>Once we reach Pine trees at our destination, the real adventure begins. We camp next to the trees for days, sometimes weeks, observing every minute details of their exciting lives. In return we gain insights into their long history, daily life and habits - and into our own lives.</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<h1 class="h1">Summer Nights, <br>Fragrant Pines</h1>
<p class="author">By Barry Forestlight</p>
<blockquote class="blockquote quote">
<p class="mb-0">We love Pine trees! They're beautiful, strong and they smell great.</p>
<footer class="blockquote-footer">Mr Pine Cone</footer>
</blockquote>
<a class="logo">THE PINE POEMS</a>
<ul class="justify-content-center menu nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">New</blockquote></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Competition</a>
</li>
</ul>
<p class="decoration">&</p>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>```I see your body tag doesn’t have any grid related class… are you able to share your style.css also, if your grid definitions are within classes instead of as inline style.
You will have to place the same body tag without being enclosed in a media query which will act as the default (for devices smaller than 992px like SM & MD)… You will have to place the same above the two media queries in your screenshot…
It would look like this:
1 Like
Ok, I’ll give it a go. Thanks for that!
That’s it. Thank you very much.
2 Likes