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
Aleksandrs Karevs
Courses Plus Student 11,178 PointsHow to distribute svg icons horizontally using CSS?
Hi everyone,
How can I distribute 6 svg icons horizontally using CSS in a way that the distance between icons would automatically increase/decrease when I stretch & shrink my viewport?
To make it easier for you, here is a mockup I have designed in Sketch3, which I want to replicate using HTML & CSS: http://d.pr/i/14Lt8 (link to a screenshot). Here is what I have managed to do so far: http://d.pr/v/1cDJ2 (link to a short video).
Also, as I mentioned above, I have used SVG files for all 6 icons, and I have a question whether it is possible to make it so that these icons would expand (get bigger) once I stretch the viewport? If so, how do I do it? In my HTML I have linked these icons using the following code:
<div class="service-icons">
<a href="#"><img src="images/truck.svg" alt="truck-icon" id="truck"></a>
<a href="#"><img src="images/ship.svg" alt="ship-icon" id="ship"></a>
<a href="#"><img src="images/rail.svg" alt="rail-icon" id="rail"></a>
<a href="#"><img src="images/customs.svg" alt="customs-icon" id="customs"></a>
<a href="#"><img src="images/warehouse.svg" alt="warehouse-icon" id="warehouse"></a>
<a href="#"><img src="images/dangerous-goods.svg" alt="dangerous-goods-icon" id="dangerous-goods"></a>
</div>
and here is my current CSS:
.service-icons {
display: block;
text-align: justify;
}
#truck {
display: inline-block;
margin-left: 20px;
margin-top: 70px;
}
#ship {
display: inline-block;
}
#rail {
display: inline-block;
}
#customs {
display: inline-block;
}
#warehouse {
display: inline-block;
}
#dangerous-goods {
display: inline-block;
}
Thank you very much in advance for the help!
2 Answers
Aleksandrs Karevs
Courses Plus Student 11,178 PointsI found a solution to this problem and this is how I solved it:
HTML:
<div id="service-icons">
<a href="#"><img src="images/truck.svg" alt="truck-icon" id="truck"></a>
<a href="#"><img src="images/ship.svg" alt="ship-icon" id="ship"></a>
<a href="#"><img src="images/rail.svg" alt="rail-icon" id="rail"></a>
<a href="#"><img src="images/customs.svg" alt="customs-icon" id="customs"></a>
<a href="#"><img src="images/warehouse.svg" alt="warehouse-icon" id="warehouse"></a>
<a href="#"><img src="images/dangerous-goods.svg" alt="dangerous-goods-icon" id="dangerous-goods"></a>
</div>
CSS:
#service-icons {
text-align: justify;
margin: 70px 20px 0 20px;
font-size: 0.1px;
}
#service-icons a {
display: inline-block;
}
#service-icons:after {
content: '';
display: inline-block;
width: 100%;
}
For more information about this topic please visit the following article on CSS Tricks: https://css-tricks.com/equidistant-objects-with-css/
Jennifer Nordell
Treehouse TeacherHave you considered using flexbox? Here's a link to the CSS tricks page explaining what it does. Nick also does a course somewhere on it. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ It might be just what you're looking for!
Aleksandrs Karevs
Courses Plus Student 11,178 PointsHi Jennifer,
Thank you for your prompt reply. I am actually reading a similar post on CSS tricks: https://css-tricks.com/equidistant-objects-with-css/ , which explained how I could achieve this using flexbox, but than again it is not supported by older browsers (as far as I know) and this may cause difficulties. Trying to figure out the last example in this blog post on CSS tricks, which achieves the same result using tables.