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
Rob Pala
2,199 PointsSVG image is playing up (the arrow) on the lake website. instead to go to the center it goes to the left...
.main-header{ background-color: #093145; width: 100%; font-weight: normal; text-align: center; text-transform: uppercase; color: white; padding: 30px 0; height: 180px; font-family: 'Montserrat', sans-serif; }
img{width: 50px;
}
with the top css I have the image (arrow.svg) on the left although i am following exactly Gill tutorials...
3 Answers
Rob Pala
2,199 PointsHi Kris,
https://teamtreehouse.com/library/width-and-height-properties
is the arrow on the middle. I have tried to reproduce the web site as I am doing some practice at the moment.
The .arrow.svg is going to the left instead to be centered...to resolve it I added the following:
.arrow{ width: 50px; position: relative; left: 50%; padding-top: 60px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
}
but Gill Hernandez only adding this:
.arrow{ width: 50px;}
and the arrow is perfectly centered....
Jonathan Grieve
Treehouse Moderator 91,253 PointsThe first thing I'd do is look at the CSS for the parent elements. The element with the class of arrow can only be the same size as its parent element or smaller, so if the parent element isn't centered, it's likely the arrow class will not be.
If you're following along exactly with the course it could be something simple causing it like a missing semi colon :-)
Rob Pala
2,199 PointsHi Jonathan,
I have replicated this:
<!DOCTYPE html>
<html>
<head> <title>Project 1</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header class="main-header">
<h1>This is my project</h1>
<span class="title">this ia a main title under the h1 title</span><br>
<img class="arrow" src="arrow.svg" alt="arrow">
</header>
</body>
</html>
CSS ----------------
/------base style-------/
*{ box-sizing:border-box; }
body { color: #878787; margin: 0;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
color: rgba(255, 255, 255, 1);
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;}
.title { color: white; font-size: 1.625rem; /* 26px/16px */}
/----Main Styles--------/
.main-header{ background-color: #ffa949; height:850px; padding-top:170px; font-family: 'Montserrat', sans-serif; text-align: center; }
.arrow{ width: 50px;
}
And the arrow going to the right handside following the span text and not below the span. I had to add a <br> in HTLM to make it to go underneath but Guil does not use <br>??
Rob Pala
2,199 PointsIt looks like that: open the header and close it so, which one is the parent element? main-header?
<header id="top" class="main-header"> <span class="title">Journey Through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> <img class="arrow"src="img/arrow.svg" alt="Down arrow"> </header>
KRIS NIKOLAISEN
54,971 PointsKRIS NIKOLAISEN
54,971 PointsCan you post a link to the course?