Css Grid landing page

Question

I'm design a landing page. in my top container i have an image, Header text and a countdown timer.

Im struggling to make it responsive. Below is a picture of my desired outcome. as well as the code snippets i have came up with so far.

Index.html

<div class="top-container">

    <div class="header">
        <img src="images/fortytrans.png" style="height:600px; width:300px;">
    </div>



    <div class="timer">

        <section class="landing">
            <div class="landing-inner">
                <div class="countdown"></div>
            </div>
        </section>

        <script src="clock.js"></script>

    </div>

    <div class="image">
        <img src="images/mainguy.png" style="height:600px; width:300px;">

    </div>


  </div>

main.css

    .top-container{
        grid-area: content;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-areas: 
        "header"
        "timer"
        "image"
           ;
      grid-template-columns: 1fr;
      grid-template-rows: 130px 800px 250px;
      }

  .header{
     grid-area: header;
 }

   .timer{
    grid-area: timer;
 }

 .image{
    grid-area: image;
}

Use two different images , one in the side and one in the middle of the two divs, then set property display (none, or block) in media query to show hide the images. — Rohan, Jan 27 '20 at 12:23

score 2 · Accepted Answer · answered Jan 27 '20 at 12:25

You're over complicating things. You don't need a grid for a simple one-column linear view. Take it out for the mobile view.

Then just add a grid with a media query for the wider layout.

header,
section,
div {
  padding: 1em;
  margin: 1em;
  background: #aaa;
}

@media only screen and (min-width: 600px) {
  body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "image header" "image timer";
  }
  div {
    grid-area: image;
  }
  header {
    grid-area: header;
  }
  section {
    grid-area: timer;
  }
}

<header>
  Header
</header>
<section>
  Timer
</section>
<div>
  Image
</div>

Css Grid landing page

1 Answers1