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
Yusef Andrews
3,982 PointsWidth: 100%; not working in the second media query.
@media (max-width: 768px) { .primary-content, .secondary-content { width: 100%; padding: 20%; border: none; }
}
Width of both primary and secondary content does not change to 100% when sizing the window width below 768px pixels. Padding doesn't seem to work either. I thought maybe I misspelled the selector, but the "border: none;" property is working properly.
5 Answers
Adrian Patrascu
15,279 PointsHi Yusef,
Very interesting. How much width did you previously have on the page if the media query would not take place? I am just wondering with that much padding you basically have like 80% width on the screen. Might be a good idea to add display: block in order to eliminate any other css styling that might affect the content.
Thank you, Adrian
Yusef Andrews
3,982 PointsThanks for the help guys. It may be possible it was an issue with the update changes not uploading to my preview window as I had multiple windows open. I decided to review the video and this time around I didn't have this issue.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsIs your problem now solved? If not, lets troubleshoot a bit more. Set your body to color green like thisbody {background-color: green;}’’’ If that white space turns green, behind the red, it will tell you that your primary-content does not quite fill up the screen width, and then you will have to twiddle with that. Try setting the primary-content towidth: 100vh;```
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsAh if its sorted out then fine! Good luck!
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Pointsuse background color to detect if the media query is working, like background-color: red;
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Yusef,
If you're doing this in workspaces it might be easiest to post a snapshot of your workspace. If not we'll probably need to see more of the css.
You used classes in the html?
Are you using
box-sizing: border-box?Are you doing a desktop first approach here?
How do you know the border property is working? Did you previously have it set to something else?