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

Posted by Eric Flowers
Eric Flowers
9,472 Points

Controlling flexbox width

Have a very simple site that I'm building: http://www.ericmflowers.com/Alphabet/

Each section of the alphabet is wrapped in a flexbox div. flex-wrap is currently set to wrap.

I want to keep each flexbox div on the same line as screen size adjusts, but resize the SVGs that are the letters. I thought to set flex-wrap to nowrap, this puts all the letters on the same line, but cuts off the first and last letter in each div.

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Not wrapping won't cause the flexbox to adjust the size of your letters. You'll need to express the letter sizes as percentages of their container. When that's working correctly, wrapping should not be an issue anyway.

You've got several other unusual things happening on your page. You might want to review the general organization of the page layout. Generally, you wouldn't use style tags in your HTML when you have CSS files, and if you did, you'd put them in the head area. And I don't think I've ever seen page content placed between the head and body elements before!

Whatever you're working towards, the visual elements look really neat - best of luck and speedy development.

Eric Flowers
Eric Flowers
9,472 Points

Thanks for the catch Steven! The style tags are remnants of me troubleshooting a linking issue I was having with the SVGs not displaying the correct font.

Eric Flowers
Eric Flowers
9,472 Points
Eric Flowers
Eric Flowers
9,472 Points

The font display issue may be a clue to whats going on here. Going down this route: https://css-tricks.com/scale-svg/ as the article says SVG is not (just) an image.