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
Dylan Aresu
9,687 PointsDesperate for html help, simple!?
For some reason, my columns won't display from left to write in my media queries, i have tried both methods of
.col { display: flex; } and... .col { display: inline-block; width: 33.333%; float: left; } and neither work!
13 Answers
Himanshu Chopra
3,055 PointsUse this for your paragraph in your style.css
.col p{
word-wrap:break-word;
}
It breaks the text in other line.
Himanshu Chopra
3,055 PointsOhhh so now I got it Dude! By mistake you forgot to link your responsive.css in your html.
<link rel="stylesheet" href="css/responsive.css">
and now even your display:flex works and if you want you can try my code aswell which I sent you in previous comment.
Hope it works for you!
Dylan Aresu
9,687 PointsStill doesn't work...
Himanshu Chopra
3,055 PointsCan you please share your workspace so that we can reach to any solution.
Dylan Aresu
9,687 Pointsindex is...
<!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/normalize.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div class="main-wrapper"> <header class="main-header"> <h2 class="main-logo"><a href="#">Logo</a></h2> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About</a></li> </ul> </header> <div class="content-row"> <div class="primary-content col"> <h2>This is a title</h2> <p>sdkljaksldjklajskldjklasjkdljaskljdkljaskljdklajdaklsjdklasjkldla</p> </div> <div class="secondary-content col"> <h2>This is a title</h2> <p>sdkljaksldjklajskldjklasjkdljaskljdkljaskljdklajdaklsjdklasjkldla</p> </div> <div class="extra-content col"> <h2>This is a title</h2> <p>sdkljaksldjklajskldjklasjkdljaskljdkljaskljdklajdaklsjdklasjkldla</p> </div> </div> <div class="main-footer"> <footer> <a href="twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>©2014 Dylan Aresu</p> </footer> </div>
</div>
</body>
Dylan Aresu
9,687 Points.main-header { padding-top: 10px; background-color: antiqueblue; border-bottom: solid 10px burlywood; display: fixed; z-index: 20; }
.main-nav { height: 100%; display: flex; display: -webkit-flex; margin-bottom: 5px; }
.main-nav li { background-color: bisque; align-self: center; padding: 10px; margin-right: 15px; margin-left: 15px; margin-bottom: 15px; }
.main-nav a { list-style: none; margin-right: 8px; margin-left: 8px; }
.main-logo { align-self: center; background: darksalmon; display: -webkit-flex; display: flex; height: 100%; padding-bottom: 15px; margin-right: 30%; margin-left: 30%; border-radius: 5%; }
.main-nav li{ align-self: -webkit-center; align-self: center; text-align: center; -webkit-flex-grow: 1; flex-grow: 1; border-radius: 5% }
.main-logo a { align-self: center; text-align: center; -webkit-flex-grow: 1; flex-grow: 4; line-height: 30px; padding-top: 20px; }
.main-logo a, .main-nav a{ color: white; text-decoration: none; }
body { text-align: center; }
/*********** Columns ************/
.col { padding-top: 20px; padding-bottom: 20px; }
.primary-content { background-color: lightseagreen; }
.secondary-content { background-color: lightsteelblue; }
.extra-content { background-color: mediumturquoise; }
/************** footer **************/
.main-footer { padding-bottom: 20px; padding-top: 20px; }
Dylan Aresu
9,687 Points@media screen and (min-width: 769px) {
.content-row { display: flex; }
}
Dylan Aresu
9,687 PointsHELP PLEASE :)
Himanshu Chopra
3,055 PointsHii. Actually I never really used display:flex yet but we can achieve what you are trying to do with float:left
See content-row is your row which has 3 column inside of that and you want your each column to be in one row. Current the all column are taking full width because you haven't set any width on that. As per my understanding you need to set the equal width for each your column so that they can come in one row. You can achieve that by.
.content-row .col {
width:33.3%;
float:left;
}
So here I am setting the width of each column inside of your row(.content-row) and floating them left so that they can place in one row.
Hope this work for you. let me know if you have any issue.
Dylan Aresu
9,687 PointsTried this and still it hasn't displayed them as columns :( cheers though
Himanshu Chopra
3,055 Pointsohh sorry. Well can you share your workspace? If you have your workspace open then on top right click on first button which says snapshot workspace you you will get a workspace link which you can share on here. That would really help me to solve your issue.
Dylan Aresu
9,687 Pointsadded my code above in comments ^ but here it is via snapshot... https://w.trhou.se/2rnp99tmvd https://w.trhou.se/uft9rk7lns https://w.trhou.se/7wiorz2egs https://w.trhou.se/yzzs3h3bdp https://w.trhou.se/ugy018k6r2
Dylan Aresu
9,687 PointsYou absolute legend, cheers mate.
Himanshu Chopra
3,055 PointsHave fun buddy :)
If my answer worked then mark it as best answer :P
Dylan Aresu
9,687 Pointsits fine, could you help solve this problem? I've got another one where unfortunately the paragraph text won't stay within its container :( here is my workspace https://w.trhou.se/tj88f8egxo
Dylan Aresu
9,687 PointsThanks!
Himanshu Chopra
3,055 PointsYou're welcome :)
Himanshu Chopra
3,055 PointsHimanshu Chopra
3,055 PointsHi. Use either display: inlince-block or float:left. Using both at a same time not preferable.