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
Matthew Barnes
Courses Plus Student 16,550 PointsFlexbox and Flex-direction
Hi guys,
I've used eight progress bars to illustrate my skills on my portfolio webpage. Using a mobile first approach, these progress bars stack on top of each other. However, using a media query at 769px, I'd like two columns of four progress bars. I've been playing around with widths and flex-direction for about 30mins and can't get the result I need.
My HTML is:
<div class="skills">
<div class="split">
<div class="topic">
<h4>HTML</h4>
<div class="meter">
<span style="width: 90%"></span>
</div>
</div>
<div class="topic">
<h4>CSS</h4>
<div class="meter">
<span style="width: 90%"></span>
</div>
</div>
<div class="topic">
<h4>SASS</h4>
<div class="meter">
<span style="width: 75%"></span>
</div>
</div>
<div class="topic">
<h4>jQuery</h4>
<div class="meter">
<span style="width: 50%"></span>
</div>
</div>
</div>
<div class="split">
<div class="topic">
<h4>JavaScript</h4>
<div class="meter">
<span style="width: 45%"></span>
</div>
</div>
<div class="topic">
<h4>SEO</h4>
<div class="meter">
<span style="width: 95%"></span>
</div>
</div>
<div class="topic">
<h4>Illustrator</h4>
<div class="meter">
<span style="width: 85%"></span>
</div>
</div>
<div class="topic">
<h4>Photoshop</h4>
<div class="meter">
<span style="width: 85%"></span>
</div>
</div>
</div>
</div>
My CSS for mobile:
.topic {
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.topic h4 {
width: 24%;
text-align: right;
margin-right: 10px;
color: $white;
}
.split {
margin: 0;
padding: 0;
}
.meter {
height: 15px; /* Can be anything */
position: relative;
width: 75%;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 5px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: $blue;
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
My Media Query css:
@media (min-width: 769px) {
.split {
width: 40%;
display: flex;
justify-content: space-between;
}
.topic {
flex-direction: column;
}
If anyone can give me some direction I'd really appreciate it!
Thanks in advance! Matt
3 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsSo, the flex-direction property needs to go on the flex container. If you want the .topic divs in a column, then the .split div should have the flex-direction: column rule. If you want two columns, you could achieve this by making the containing div around the .split divs a flex container also (.skills):
@media (min-width: 769px) {
.skills {
display: flex;
}
.split {
width: 40%;
display: flex;
justify-content: space-between;
flex-direction: column;
}
}
Meg Matty
Front End Web Development Techdegree Graduate 22,928 PointsHi - can you simply do something like this for the media query?
So use flex box for the bars and then 2 floated columns for the media query? I will try to link my CodePen here
@media (min-width: 769px) {
.split {
float: left;
width: 50%;
}
.split-2 {
float:right;
width: 50%;
}
Matthew Barnes
Courses Plus Student 16,550 PointsThank you both for your replies! Both such simple solutions!
I really appreciate your time!