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!

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

gabriel cajigas
gabriel cajigas
1,041 Points
Posted by gabriel cajigas
gabriel cajigas
1,041 Points

My header disappears from 480px to 660px.

here is my responsive css code:

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

/*************************************** TWO COLUMN LAYOUT ****************************************/

primary {

width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/*************************************** PAGE: PORTFOLIO ****************************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(0n) { clear: left;

  }

/*************************************** PAGE: ABOUT ****************************************/

.profile-photo { float: left; margin: 2em 5% 80px 0;

}

}

@media screen and (min-width: 660px) { nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; } #logo{ float:left; margin-left:5%; text-align:left; width:45%; } h1{ font-size:2.5em; } h2{ font-size:0.825em; margin-bottom:20px; } }

My pages heading disappears when the page goes form 480 to 660, is looks like the picture is taking over the heading space or something. This started happening when the nav modification for the 660 was added.

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

open chrome dev tools and tinker with the element(s) and styles. Did you find anything there?

1 Answer

gabriel cajigas
gabriel cajigas
1,041 Points
gabriel cajigas
gabriel cajigas
1,041 Points

I am using safari, I tried using the development tool and it works fine on smartphone but when it gets to ipad/computer size the header disappears and the images move.

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

May I recommend Chrome instead of Safari? Here is a quick tutorial to get you up to speed: https://www.youtube.com/watch?v=Z3HGJsNLQ1E

Typically, you will experience frequent errors when developing, and dev tools is the place to troubleshoot and fix those errors via the element inspecter.

If you have a live link of the page, others can look at it. But, this is a great opportunity to get your feet wet and dive right in to dev tools. See what you can find. There's likely some unexpected css being applied to your header if its disapearing.