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
Sophia Harrison
4,534 PointsLogo "float: left;" only works for Portfolio page...
Responsive float left feature for logo (H1 and H2) @media with min-width 660px only works for the Profile page but not the About or Contact page...
@media screen and (min-width: 660px) {
/**********************
HEADER
***********************/
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%;
}
}
<header>
<a href="index.html" id="logo">
<h1>Sophia Harrison</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<header>
<a href="index.html" id="logo">
<h1>Sophia Harrison</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<header>
<a href="index.html" id="logo">
<h1>Sophia Harrison</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
2 Answers
Sophia Harrison
4,534 PointsAfter I added the last bit of responsive code to the website everything corrected itself. Not exactly sure how but maybe the server was just slow to process my changes. Thanks for your help. :)
Andrew VanVlack
20,155 PointsThe first thing I would check is to make sure the id is correct on the html items on those other pages. Also if is the nav selector in the media query working on the other pages? It might be you have the media query css linked wrong on the other pages.
Can you paste in the rest of the css and one of the troubled html pages. If you past it in with three backsticks (`) before and after, it will show in a code box. Like this
@media screen and (min-width: 660px) {
/********************** HEADER ***********************/
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%; }
}
Sophia Harrison
4,534 Points@media screen and (min-width: 660px) {
/**********************
HEADER
***********************/
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%;
}
}
<header>
<a href="index.html" id="logo">
<h1>Sophia Harrison</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<header>
<a href="index.html" id="logo">
<h1>Sophia Harrison</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<header>
<a href="index.html" id="logo">
<h1>Sophia Harrison</h1>
<h2>Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
Andrew VanVlack
20,155 PointsEverything looks good there. Did you get the responsive.css linked under the main.css in the the other two html documents?