Media query and css flexbox

HTML-CSS
1

Hi, I am looking at the technical document project in responsive web design.

I want the page to be responsive to mobile so that when on my media query the viewport is below 600px the side nav bar fills the whole screen.

I have done this with CSS Grid and a single media query, the media query works fine but when I have added the grid the media query does not work.

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>MenuBarLeftMediaQ</title>
</head>
<body>
<h1>Menu Bar Left</h1>
<div class="container">
	<div class="sideMenu">
		<h2 id="Item1">Item 1</h2>
		<h2 id="Item2">Item 2</h2>
		<h2 id="Item3">Item 3</h2>
		<h2 id="Item4">Item 4</h2>
		<h2 id="Item5">Item 5</h2>
		<h2 id="Item6">Item 6</h2>
	</div>

	<div class="content">
		<section id="Item1">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</section>
		<section id="Item2"></section>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<section id="Item3"></section>
		<section id="Item4"></section>
		<section id="Item5"></section>
		<section id="Item6"></section>
	</div>
</div>
	</html>```

and the CSS so far

```body{
background: grey;
}

.sideMenu{
width: 300px;
height: 800px;
border: double; 1px black;
text-align: center;
}




.container{
display: grid;
grid-template-columns: 1fr 3fr;
}

@media screen and (max-width: 600px) {
  .sideMenu {
  	width: 100%;
    
  }
}````

THANKYOU!
2

Please give us a link to your live project. It will increase the chances that someone will want to help you with this. You want to make it as easy as possible for people to help you :slight_smile:

3

Hi , thanks for the response code pen link is

4

I’m assuming you mean you want the nav menu to be above the content and take up 100% of the width available? I would suggest you use a narrow-first approach to styling your page. Narrow your browser as skinny as it will go and style the page so it looks good at that narrow width. No horizontal scroll bars. No media queries. This will be your default CSS. You probably won’t need to use flex/grid for the layout because block level elements already want to stack on top of each other.

Then, after you have the narrow style looking the way you want it you can add the media query for wider view ports. You’ll use min-width instead of max-width in the query. Inside the media query is where you’ll add your additional CSS to put the menu on the left side of the page using whatever type of display layout you feel like.

5

Thanks BBSmooth, I’m not sure the code reflects what I want to achieve, I’m looking to have the nav bar on the left taking up about 1/4 of the page, and the content on the right of the nav bar, then on smaller viewport the nav bar fills the page with the content below

6

I understand this. This is what you have right now.

I’m pretty sure this is what I was thinking you wanted. The nav menu is above the content and fills 100% of the available width. Does my explanation sound right to you?

You can easily put the nav menu above the content and have it take up the entire width. If you get rid of all of your existing CSS this is exactly what will happen. What I’m saying is to get rid of all of your existing CSS (there isn’t that much so it’s not that big of a loss), narrow your browser window all the way in, and style everything the way you want it for the narrow width. No media queries needed. This will be your default CSS.

Then after you have the narrow style done you can add the media query for the wider viewport and shift the nav menu over to the left.

1 Like
7

Yes, I think I understand what you are saying, start narrow and style, then put a media query in for the wider window, in effect work backwards from where I have started.

I will come back to this tomorrow I think I have spent too many hours on this today and my head may just explode!

Will probably come back to you tomorrow, thanks for the help a new way of looking at this for me was needed!

Does CSS ever become second nature?

8

Nope, you are correct an easy fix (couldn’t put it down without fixing)

  .sideMenu {
  	float: left;}

  }
}```

you are a genius!!

Thank you so much
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.