Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Build a Responsive Navigation with Flexbox

Kent Hefley
Kent Hefley
11,215 Points
Posted by Kent Hefley
Kent Hefley
11,215 Points

SVG Not Scaling in "<a></a> tags

In the "Build A Responsive Navigation with Flexbox" video with Guil Hernandez, he embeds a svg logo in a link with the class "site-logo"

 <a class="site-logo" href="/">
        <img src="img/logo.svg" alt="Poly — UI Toolkit">
      </a>

He then styles the class

.site-logo  {
  width: 110px;
  align-self: center;
}

I tried to recreate this method using my own svg image. However, when I style the class "site-logo" the svg does not scale with the link. The only way I could scale the image was to change the css to:

.site-logo img {
width: 110px;
}
.site-logo {
align-self: center;
}

Can anyone tell me what I am missing?

1 Answer

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Kent Hefley,

Is there a width and height set in your <svg> tag? I removed them from the SVG in the Flexbox demo so that it scales to the size of the parent <a>.

Kent Hefley
Kent Hefley
11,215 Points
Kent Hefley
Kent Hefley
11,215 Points

You are the man, Guil. That was the problem. I really appreciate you getting back to me.