# Summer Nights Tutorial: Missing Grid

**URL:** <https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414>\
**Category:** Beginners\
**Tags:** tutorial\
**Created:** [August 4, 2020, 1:44am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414 "2020-08-04T01:44:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacko](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jacko](https://forum.pinegrow.com/u/Jacko)\
**Post date:** [August 4, 2020, 1:44am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/1 "2020-08-04T01:44:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [August 4, 2020, 1:49am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/2 "2020-08-04T01:49:53Z")

</div>

Are you able to post your code snippet? That would help for analysing.

---

<div class="post-metadata">

**Author:** ![Jacko](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jacko](https://forum.pinegrow.com/u/Jacko)\
**Post date:** [August 4, 2020, 2:03am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/3 "2020-08-04T02:03:51Z")

</div>

Thanks for quick reply.

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [August 4, 2020, 2:05am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/5 "2020-08-04T02:05:02Z")

</div>

Try enclosing all your code within triple-tilde symbol ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1937f18879c585d0fd6e252c48d5e437a634ad90.png)

---

<div class="post-metadata">

**Author:** ![Jacko](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jacko](https://forum.pinegrow.com/u/Jacko)\
**Post date:** [August 4, 2020, 2:08am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/6 "2020-08-04T02:08:57Z")

</div>

````auto
<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&apos;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">&amp;</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>```
````

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [August 4, 2020, 2:11am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/7 "2020-08-04T02:11:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jacko](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jacko](https://forum.pinegrow.com/u/Jacko)\
**Post date:** [August 4, 2020, 2:29am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/8 "2020-08-04T02:29:11Z")

</div>

Sorry, not too familar with this stuff, let alone code. Hope this is what you want?

 ![Screen Shot](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a709ff9cbf28153ae8ddd5f28e111c509c222919.png)

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [August 4, 2020, 2:48am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/9 "2020-08-04T02:48:08Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/93cd5d1c65efab4e0571e542861f64979940da07.png)

---

<div class="post-metadata">

**Author:** ![Jacko](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jacko](https://forum.pinegrow.com/u/Jacko)\
**Post date:** [August 4, 2020, 2:58am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/10 "2020-08-04T02:58:16Z")

</div>

Ok, I’ll give it a go. Thanks for that!

---

<div class="post-metadata">

**Author:** ![Jacko](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jacko](https://forum.pinegrow.com/u/Jacko)\
**Post date:** [August 4, 2020, 3:12am UTC](https://forum.pinegrow.com/t/summer-nights-tutorial-missing-grid/4414/11 "2020-08-04T03:12:31Z")

</div>

That’s it. Thank you very much.