In the last two articles, we are creating a Layout for the standard website by including various components we created while learning HTML and CSS. We have already added a header, navigation bar and content with 3 rows which are not responsive. So let's start today with making it responsive...
@media (max-width: 1200px) {
.column {
width: 50%;
}
}
@media (max-width: 600px) {
.column {
width: 100%;
}
}
What will above code do? If the Width of the browser window is less than 600 px, the width of each column is 100% so that only one column in each row. Similarly, if the width is less than 1200 px, the width of each column is 50% so that there will be two columns in each row.
.footer{
background-color: #F1E8E6;
text-align: center;
padding: 20px;
}
Here we are with our complete layout. Let's have a look...
That's all for today. We have completed our very own website layout. In the next article, let's see what to study...Not yet decided...
Till then #keepCoding
Make it Responsive
If we see at our layout of the content, it always shows 3 columns side by side(Although not in Codepen as they add their own code to make it responsive). We will now write a piece of code that will change it to only one Column on smaller devices.@media (max-width: 1200px) {
.column {
width: 50%;
}
}
@media (max-width: 600px) {
.column {
width: 100%;
}
}
What will above code do? If the Width of the browser window is less than 600 px, the width of each column is 100% so that only one column in each row. Similarly, if the width is less than 1200 px, the width of each column is 50% so that there will be two columns in each row.
Making Unequal Columns
It's easy now. Just set the right width for each column. We will set 25% width for left and right column and 50% for middle column. We are also using the concept of responsiveness and hiding left column when the width is 1200 px or smaller and hiding both side columns when the width is less than 600px.Footer
Finally, let's add a footer to our website which will hold things like trademark and extra site links..footer{
background-color: #F1E8E6;
text-align: center;
padding: 20px;
}
Here we are with our complete layout. Let's have a look...
That's all for today. We have completed our very own website layout. In the next article, let's see what to study...Not yet decided...
Till then #keepCoding
