Stuck in CSS grid exercice: Use Media Queries to Create Responsive Layouts

Stuck in CSS grid exercice: Use Media Queries to Create Responsive Layouts
0.0 0

#1

Tell us what’s happening:

Hello,

I don’t understand what are media queries in CSS grid system. Are media queries specific instructions or just a concept? I can’t do the exercice because I don’t understand what is asked from me.

Your code so far


<style>
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }
  
  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }
  
  .item3 {
    background: PaleTurquoise;
    grid-area: content;
  }
  
  .item4 {
    background: lightpink;
    grid-area: footer;
  }
  
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "header"
      "advert"
      "content"
      "footer";
  }
  
  @media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }
  
  @media (min-width: 400px){
    .container{
      /* change the code below this line */
    
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    
    /* change the code above this line */
    }
  }
</style>
  
<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">content</div>
  <div class="item4">footer</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts


CSS Grid: Use Media Queries to Create Responsive Layouts
#2

Media queries are really nothing to do with the grid system. CSS grid can make it easy to layout a webpage, and through using media queries it can be easy to make the page look good on different size screens. A media query can take a bit of thinking about (you don’t need to though for this challenge as the code is already provided.), but the main idea is this:

.header {
  width: 100%; // on small screens such as iPhone, header width is 100% 
}

@media (min-width: "iPhone(etc) screen width in pixels") {
  .header {
    width: 50%; // on screens larger the iPhones set header width to 50%
}

The basic idea is the layout needs to be different depending on the screen size and media queries allow us to do this. Have a play with the width of the webpage view (i.e the right part of the challenge page) and see how the content changes with and without the media queries in place.

I hope this clarifies it, but if you get stuck, come back and I’ll try to help. :slight_smile:


#3

Thanks but I’m still stuck. I don’t understand how media queries work

The exercice is “When the viewport width is 400px or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.

I have to use grid-template-rows and grid-template-columns in the container?


#4

To understand media queries, I recommend you take a look at:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The instructions to the challenge are a little unhelpful if you are new to the CSS grid and media queries. Hopefully the link will help with understanding media queries. There is an example of a working media query in the code:

//when the viewport width is 300px or more, the number of columns changes from 1 to 2. 
//The advertisement area then occupies the left column completely.

  @media (min-width: 300px){// when screen is larger than 300px wide
    .container{//change container class
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"//make advert take top left cell
        "advert content"//make advert take middle left cell
        "advert footer";//make advert take bottom left cell
    }
  }

The code you need to change is here:

@media (min-width: 400px){//when screen is larger than 400px wide
    .container{//change the container class
      /* change the code below this line */
    
      grid-template-areas:
        "advert header"//****you will need to change this line****
        "advert content"
        "advert footer";//****you will need to change this line****
    
    /* change the code above this line */
    }
  }

Hope this helps you to get it :slight_smile:


#5

This might be a bit of an oversimplification, but here it goes…

A query itself is just a request for information. For example, a database query requests information from the database based on a specific set of parameters. A media query takes the parameters that you specify (i.e. screen, min/max screen-width, etc.) and applies the CSS when those conditions apply.

So, if you have a media query:

@media (max-width: 400px)  {
	h1 {
		color: purple;
	}
}

the CSS inside of that query will apply as soon as the screen is any size less than 401px. In this case, any h1 text will be purple. Once you view the page on a larger screen, say 405px, the text will revert back to the original color that you specified outside of the query (or the default color if one was not specified).

You can modify pretty much anything. You just have to say what you want the page to look like at that particular size and add your CSS accordingly.


#6

Ok I understand better now but I don’t know what to code inside grid-template-columns property in this exercice…How can I determine that I am placing the header and footer at the top, for example given their name in grid-template-areas??


#7

I struggled with that at first, but once you get your head round it, it is not that tricky. This is a bit of the code from the grid template areas:

          column  column
row       advert  header
row       advert  content
row       advert  footer

The above will create an advert that will take up an entire column. If we wanted to make an advert span an entire row, we could do something like this:

        column column
row     advert advert

All you need to do is work out how to change the code so that the header takes up the entire first row (you could think about it as the header taking up two cells) and how to make the footer take up the entire bottom row. Have a go and try to code a solution, if you can’t get it to pass the tests, then paste you code and we can see where your understanding is at so we can be of further help :slight_smile:

Hope this helps :slight_smile:


#8

I managed to make it work! It was so simple! All I had to do was rearrange the grid-template-areas content and it worked.

For example: header header
advert content
footer footer

worked.

Initially I was looking to code wome properties with grid-template-columns and grid-template-rows, but I missed the point.

Now I got it.It’s a visual represnetation of how celles are arranged (a map). Got it.

On to the next exercice and thank you!


#9

Excellent work getting it all sorted.

That’s the beauty of coding - if you just keep at it, eventually you will figure it out. It just takes practice, but over time it gets a lot easier.


#10

I read in many forums and on Internet people say that with time coding gets more complex and harsh as you dig in, and that coding in general is tough.You say that it gets easier with time…So what is the truth, or is really subjective?


#11

Excellent question!
But, you are the only person who has your answer.
It’s all in the art of finding what will work to give you the results you are looking for. If you enjoy the challenge, then it gets easier, if you don’t as you dig in I think it could get harder.
It’s all up to you, nobody else. :wink:


#12

Hi there! If anybody is struggling with understanding this exercise I recommend watching this video from Rachel Andrew in which the concept of grid-template-areas is explained in 4 minutes.


#13

Hi all,

This is had me stuck for a bit as well I was too busy focusing on the ‘grid-template-columns’ instead of looking at rearranging the ‘grid-template-areas’ . My code is below:

grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "advert content"
    "footer footer";

I hope this helps


#14

wow it was so simple lol


#15

I’ve read and re-read this entire thread, and there is still one thing I’m not understanding. I’ve passed the exercise by simply changing grid-template-areas to “header header” and “footer footer”. But, I’m more interested in learning best practices, not necessarily just the thing that will get me to pass this challenge. Would it be best practice to also make changes to grid-template-column and grid-template-row properties? The example code (pasted below) seems to imply that something needs to be done with those. However, it doesn’t appear to be a requirement to pass the exercise.

@media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;  
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

Thanks!

#16

Hi,
That challenge was just a very brief intro to grid. If you’re feeling there’s more than just that then you are correct.

A transition from 17" monitor to tablet size might just require that you reallocate the space on your existing grid as in the example.

Usually at very small screen sizes, yes, you would likely re-dimension the rows and columns probably to stack vertically one atop the other and maybe hide some less important content in a drop down menu.

Now that gigantic monitor screens are becoming the norm you also have to consider that your content may become too wide on some desktops so you might need a provision for a wider margin or more columns.

You might benefit from playing around with making mock templates from scratch that rearrange to look good at different screen sizes. I use CodePen for this since many examples are already on CodePen I can just fork them.

grid-template-columns and -rows sets the relative dimensions of your grid

grid-template-areas sets what content occupies those grid cells


#17

Thanks man. This helped me understand it better too and also get past the challenge.


#18

Thank you! This helps, and I appreciate your clarification. I’ll take a look at the pens you recommended.


#19

Whao, i have been stuck here as well. Thanks for the solution.


#20

Thank you , everyone. I was having issues with this and I get it now. I was way overthinking it.