Advice on media queries,etc in project 5 for the RWD curriculum

1

Hey guys, could you guys help me with making media queries for my webpage and also
to make the height of the welcome section equal to the height of the viewport. I don’t know what I should do. Thx in advance for the help!

Link to the webpage in question:

Regards
A front-end dev rookie

2

What type of @media query are you trying to make?

3

well I thought about making one for mobile . So that the site doesn’t distort on smartphones.

1 Like
4

But I don’t know how to use media queries

5

So what you can do is create a media query with a max-width of 600, because thats when websites typically starts to distorts. ex:

@media screen and (max-width: 600px) {
/* CSS Here When the viewport is less than 600px*/
}

You can learn more about media query here:

CSS media queries - CSS: Cascading Style Sheets | MDN
or if you want to experiment a little bit here:
Responsive Web Design Media Queries

6

ok, I’ll try that, also how do you make the height of the welcome section equal to the height of the viewport.

7

You can use the vh units that means view height. It basically is viewport height.
so:

element {
  height: 100vh;
}
1 Like
8

Ok I used that piece of CSS but the test doesn’t accept it.
It still says make the height of the welcome section equal to the height of the viewport.

The CSS i used:

#welcome-section{
	background-color:#DC143C;
  padding:50px;
  border-radius:10.5px;
  display:flex;
  justify-content:center;
  align-content:center;
  flex-direction:column;
  height:100vh;
}
9

Remove padding property, otherwise your welcome-section will more than 100vh.

2 Likes
10

Ahh,that worked! Thx so much!

11

Extra feature suggestions:

  1. Remove margin-left and margin-right from .project-tile and #all_projects. Then, add
@media (min-width: 940px) {
  .project-tile, #all_projects {
    margin-left:300px;
    margin-right:300px;
  }
}
  1. Remove margin-left from #media-links.
1 Like
12

Thank you for the suggestions!