Media Query break points not working?

I’m working on an excercise and trying to implement break points in vanilla CSS, but for some reason when I preview the site in the browser nothing happens once the page reaches the minimum break point. Here’s my CSS:

/*********
 Base Element Styles
*********/

* {
	box-sizing: border-box;
}

body {
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0 auto;
	background-color: #f5f5f5;
}

h1 {

}

p {
	margin-bottom: 20px;
	padding: 0 1em;
}

a {
	text-decoration: none;
}

ul {
	list-style-type: none;
}

img {
	width: 100%;
	padding: 0 20px;
}


/*********
 Layout Styles
*********/

/*----Navigation----*/

.name {
	margin: 0;
	text-align: center;
}

.main-nav a {
	padding: 15px 0;
	display: block;
	background: white;
	margin-bottom: 5px;
}

/*----Containers----*/

.wrap {
	min-height: calc(100vh - 89px);
}

.container {
	padding-left: 1em;
	padding-right: 1em;
}

.main-footer {
	text-align: center;
	padding: 2em 0;
}

/*********
 MEDIA QUERIES
*********/

@media (min-width: 769px) {

	.wrap {
		width: 100%;
		max-width: 80%;
	}

	.container {
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
	}

	.name,
	.main-nav li {
		display: inline;
	}


}


@media screen and (min-width: 1024px;) {

}

It’s still a work in progress, but I just can’t figure this thing out. Thanks in advance!

You should change min-width to max-width
Basically your styles are applied already on big screen, as you say "apply this styles when min-width is 769px, which it is.

I changed it to max-width, but they styles still don’t change. Like my navigation doesn’t display inline, and my containers just stretch all the way across the screen instead of reaching max-width and stopping.

Could you put your code into a Codepen? It would be easier to debug :slight_smile:

See if this link works: https://codepen.io/GiantGough/pen/oeKQEG

I don’t know how to add the pictures too codepen, though.

It works. (Note: on codepen, you don’t have to add the html, head, and body tags)
Also, the images won’t work unless you have them uploaded somewhere. You could try something like tinypic

It’s not working on my end for some reason. Neither on Firefox or Chrome. The navigation should change to inline and all that good stuff, but it just stays stacked. Same with the max width on my side. Any reason why this would be?

Another thing… You are targeting other properties on the breakpoints…
Like:

.wrap {
	min-height: calc(100vh - 89px);
}

.container {
	padding-left: 1em;
	padding-right: 1em;
}

– on desktop
and…

@media (max-width: 769px) {

	.wrap {
		width: 100%;
		max-width: 80%;
	}

	.container {
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
	}

– on mobile…

Basically if you want to see a change, you have to set the same properties on both… Like changing the display property from block on desktop to inline-block on mobile…

1 Like

Check it out here.
I’ve made the .main-nav li items to be display: inline-block on desktop, and display: block on mobile. Play with the resize now…

Basically you now have for desktop:

.main-nav li {
  display: inline-block;
}

And for mobile (max-width: 769px):

.main-nav li {
	display: block;
}

I also added some other styling to make it look better (as padding: 0 for the ul, and a background color for the .main-nav).

I hope it makes more sense now…

I think it’s making more sense now. So if I have, for example, a width property for .wrap listed outside of media queries, I also need to have it listed inside of media queries? Even if it doesn’t change?
And if I want the Student name on the left and the Nav on the right, but on the same line can I change the display from block? Block has them sitting on their own separate lines, right?
Thanks so much for helping me out, man.

Basically, if you want, for example, to have a .wrap to be 100% width on both desktop and mobile, you only set it once outside the media-queries.

The media-queries are useful when you want to have a different style for, let’s say mobile. So… for example, you want the .wrap to be 1200px wide on desktop, and centered horizontally with margin: 0 auto, but you want it to be 100% wide on smaller screens… This is what you put in your code:

.wrap {
    width: 1200px;
    margin: 0 auto; /* centering */
}

/* and for media queries */
@media (max-width: 768px) {
    .wrap {
        .width: 100%;
    }
}

You can check out my example of responsive mobile navigation on Codepen.

1 Like

This video might help a little.