Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Nick Basile
Nick Basile
17,942 Points

Media Query Dilemma

Hi everyone! I'm having some trouble creating my own personal site. I decided to take a mobile first approach to coding it, so I coded all of my general and mobile styling first. Then I added a media query that looks like the one below for all of my desktop styling.

CSS @media screen and (min-width:768px) { /* Desktop Styles */ }

My problem is that when I took my site live, mobile devices just ignore my media query and display all of the styles. I tried adding some code in the <head> of my HTML to make it explicit that I'm dealing with the viewport:

CSS <meta name="viewport" content="width=device-width, initial-scale=1">

But, this hasn't helped either. I also tried playing around with min-device-width but that hasn't been so helpful either. What's really frustrating me is that I coded this with Brackets, and everything works when I adjust my browser screen. However, when it is live it just isn't working. My site is currently live at www.nickjbasile.com if anyone wants to check out the source code a bit more in-depth. I recommend viewing it in Chrome, I still need to optimize it for other browsers.

Thank you for reading this and for your help!

Steven Snary
Steven Snary
17,540 Points

Remember to add the following line of code in the <head> section of your site...

<meta name="viewport" content="width=device-width">

This line will make sure that the site doesn't scale down on mobile

nik
nik
8,925 Points

When inspecting your site through chrome, it looks like your div's are not clearing properly because the "about me" and "my work" extend far left and right overlaping. I also see that your sections are placed out of the grid-container main. Not sure if this is on purpose but I'm guessing you want a borderless full window look?

http://gyazo.com/9e4786ce2837dd9f09e94d26dddce89d

Nick Basile
Nick Basile
17,942 Points

Hi Nick, thank you for the response. At larger browser sizes, my content stays in the center and there are borders on the side. But, as you mentioned there is about a 400px range range after 768px where my divs go all over the place. I am working on fixing this, probably by adding another media query and some specific styling to fix the overlaps. Also, thanks for pointing out that my section was outside the grid-container main. I'll fix that now!

2 Answers

Alex Heil
Alex Heil
53,547 Points

hey Nick Basile , first of all I want to second the advice Steven already gave by implementing a meta viewport tag into your header.

second after looking at your main.css on the site I notice you're using 

@media screen and (min-device-width: 768px)

I would change this to 

@media screen and (min-width: 768px)

by making this change you're no longer relying on the device itself and people with bigger devices that (for whatever reason) minimize their browser window will be served correctly. hope that helps and have a nice day ;)

Nick Basile
Nick Basile
17,942 Points
Nick Basile
Nick Basile
17,942 Points

Hi Alex and Steven, thank you very much for your answers! I had already included the meta tag in my code, I just wrote my question wrong so it wasn't showing (sorry!). I re-uploaded my code and took out the min-device-width, but that didn't really help either. I also wrapped my mobile only styles in their own media query and that has helped tremendously with mobile formatting. I just need to address the area between tablets and desktops and I think I'll be all set. Thank you again for the help!