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

CSS Build a Responsive Navigation with Flexbox

Kent Hefley
Kent Hefley
11,217 Points
Posted by Kent Hefley
Kent Hefley
11,217 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,217 Points
Kent Hefley
Kent Hefley
11,217 Points

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