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
Doegena Fennich
8,974 Points#logo text-align: left; not responsive.
So i've tried almost everthing to put the text align of the header (#logo) to the left but unfortunately it's still not responsive.
here's my responsive.css file;
@media screen and (min-width:480px) {
/**************
TWO COLUMN
**************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/******************
PAGE: PORTFOLIO
******************/
#gallery li {
width: 28.333%
}
#gallery li:nth-child(4n) {
clear: left;
}
/******************
PAGE: CONTACT
******************/
.photo-12 {
float: left;
margin: 0 5% 80px 0;
}
}
@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%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
Main css file general till navigation;
/**************
GENERAL
**************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/**************
HEADING
**************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin:15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/**************
NAVIGATION
**************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style:none;
margin: 0 10px;
padding: 0;
}
nav li {
display:inline-block;
}
nav a {
font-weight: 800;
padding:15px 10px;
}
4 Answers
Andrew Jones
542 PointsHmm. Best bet would to be to open up the developer section of your browser and see what is over riding that rule. Should be able to see the rule with a line through it and then you can see what is making it stay centered.
Doegena Fennich
8,974 PointsThanks, found the problem! took me 3days but i've learned something out of it.
Doegena Fennich
8,974 PointsChristian Andersson Ok, should've thought about that in the first place.
main.css heading
/**************
HEADING
**************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
responsive.css
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
HTML
<header>
<a href="index.html" id="logo">
<h1>Doegena Fennich</h1>
<h2>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>
Jacob Anderson
6,718 PointsHi Doegena! Try putting your <a> tag and it's contents inside a <div>. And apply the logo style to that <div> instead of the <a> tag - Let me know if that works!
Doegena Fennich
8,974 PointsSadly that doesn't work either.
<header>
<div id="logo">
<a href="index.html">
<h1>Doegena Fennich</h1>
<h2>Designer</h2>
</a>
</div>
<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>
Andrew Jones
542 PointsWhat viewport size are you viewing this at? Also, what are the orders of your linked stylesheets? It looks to me like the last one linked will take priority at any size over 660px as you have set this media query to min width?
Doegena Fennich
8,974 Points@Andrew Jones everything works except the text-align for the id "logo"
HTML links;
<html>
<head>
<meta charset="utf-8">
<title>D Fennich | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0," />
</head>
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsHey Doegena Fennich
can you please provide your html? Also, please try to provide the code that's actually relevant to the part that you're having issues with. It makes it more easily for others to debug and read your code, if unnecessary parts (such as the
body,img, etc etc) are excluded.