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

Rob Pala
Rob Pala
2,199 Points

SVG 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...

Can you post a link to the course?

3 Answers

Rob Pala
Rob Pala
2,199 Points

Hi 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
MOD
Jonathan Grieve
Treehouse Moderator 91,228 Points

The 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
Rob Pala
2,199 Points

Hi 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
Rob Pala
2,199 Points

It 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>