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
nagamani palamuthi
6,160 Pointsmy header does not display in a line . "california" breaks up in the mobile version.
also did not get why giving the value- none, to the border-top property adds a border in the secondary content query. pls. help.
4 Answers
john larson
16,594 Points//this is the smallest media query I saw in your css, and this is much larger than the 300px or there abouts of a mobile screen. It's possible that Guill didn't take it down that far. Sometimes the teachers address things like that in a later lesson. If you wanted to experiment on your own you could maybe try a slightly smaller h1 font at: min-with 350px or something like that.
@media(max-width:768px){
.primary-content,
.secondary-content {
width: 100%;
padding:20px;
border-top:none;
}
nagamani palamuthi
6,160 Pointsok thanks . will try that. can anyone tell me am I missing something how os Guill giving the border-top property a value of ' none' and it is showing a border above the footer , in the media query?
john larson
16,594 Points//Where do you see this adding a border?
//Cause I have to agree, that would not make ANY sense.
@media(max-width:768px){
.primary-content,
.secondary-content {
width: 100%;
padding:20px;
border-top:none;
}
john larson
16,594 PointsI think I understood what your talking about with the header. The word California is SUPPOSED to go down to the next line on smaller screens. I cant imagine anyway you could get that whole header on one line at 300px width. In the video you can see California breaks down for Guil as well. It happens kinda fast so it's easy to miss. If this helps a best answer is a nice way to say thank you, if not...let's figure it out. :D
nagamani palamuthi
6,160 Pointsno what I mean is the word california goes down but when I shrink the browser width I cannot see the california word fully. i use the restore down button in the top right of my browser to adjust my screen width. I am seeing scroll bars when I use that restore down button. Is there another way to reduce the screen width?
john larson
16,594 PointsYes, I think...reduce the font size on smaller screens with a media query, until you can see the full word:
@media screen and (min-width: 350px){
h1 {
font-size: 0.9rem;
}
}
0.9rem might be to small but look for a size that works for what you are trying to do. Also you asked if there is another way to adjust the screen width. Once the screen is small you can resize it by hovering over the right edge of that window you just reduced. The pointer will change and you can drag to make the screen any size you like
nagamani palamuthi
6,160 Pointsthat was helpful thnx.