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
Mirela Chiriac
Courses Plus Student 2,130 PointsIs this the correct way to do this layout? It's not responsive, i will try to fix that.
Html file:
<!DOCTYPE html>
<html lang="ro">
<head> <title>Template</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="template.css"> </head>
<body>
<header><p class="full">Utilities Menu</p></header>
<div class="logo">Logo 150x100</div> <div class="banner">Banner 468x60</div> <div class="search">Search Area</div> <div class=" full main">Main Menu</div> <div class="left vert">Left</div> <div class="teaser">Teaser</div> <div class="right vert">Right</div> <footer class="full footer">Footer Menu</footer>
</body> </html>
CSS file:
* {
text-align: center;
box-sizing: border-box;
}
body {
background-color: navy;
max-width: 100%;
max-height: 100%;
}
.full {
width: 98%;
background-color: lightblue;
margin: auto;
height: 1.875rem;
margin-bottom: 5px;
}
.logo {
width: 23%;
height: 6.8rem;
line-height: 6.8rem;
background-color: pink;
float: left;
margin-left: .9%;
margin-bottom: 0.3rem;
margin-right: 0;
}
.banner {
width: 74.5%;
height: 3.75rem;
background-color: red;
float: right;
line-height: 3.75rem;
margin-bottom: 5px;
margin-right: .6rem;
}
.search {
width: 74.5%;
height: 2.5rem;
line-height: 2.5rem;
background-color: yellow;
float: right;
margin-right: 0.6rem;
}
.full {
width: 98%;
height: 3.125rem;
line-height: 3.125rem;
background-color: lightblue;
display: block;
clear: both;
}
.vert {
width: 13%;
height: 18.75rem;
line-height: 18.75rem;
background-color: green;
display: inline-block;
margin-bottom: .5%;
}
.left {
float: left;
margin-left: 0.7rem;
}
.teaser{
background-color: orange;
width: 70% ;
height: 9.375rem;
line-height: 9.375rem;
margin-left: .4rem;
margin-right: .4rem;
display: inline-block;
}
.right {
float: right;
margin-left: .1rem;
margin-right: .7rem;
}
2 Answers
Jonathan Grieve
Treehouse Moderator 91,254 PointsI've fixed your CSS markup for you.
It looks like you're doing most of the right things.
You have your meta viewport tag. You have percentage and em length units in your elements.
Do you know how to set CSS media queries and seek out layout breakpoints in your code?
Konrad Pilch
2,435 PointsUmm, can you use this ( ) x3 and write html and or css separately and close it with three ( )livbing a space between? If ud added HTML could help to see what ur doing with the CSS.
Mirela Chiriac
Courses Plus Student 2,130 Pointsi try to put html file but It's not working. i am doing something wrong :(
Mirela Chiriac
Courses Plus Student 2,130 PointsMirela Chiriac
Courses Plus Student 2,130 PointsThank you for answering; i know how to use @media but about seeking breakpoints in my layout..i am not so sure. i will try to do it as i learned and I will come back :)
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 Pointshttps://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Jonathan Grieve
Treehouse Moderator 91,254 PointsJonathan Grieve
Treehouse Moderator 91,254 PointsNo problem.
All it means is looking through your layout in the browser and finding the points in the screen where the layout starts to "break" or stop looking nice. You then target that breakpoint with an @media query and write some CSS to correct it. :-)