Making the Blog section responsive
This Blog section is based on a three-column grid, and it works pretty well on desktops and tablets; however, on a mobile, it shrinks a bit too much, so we'll need to change the three columns to two columns (and one column for a small mobile):
Mobile view of the Blog section
To change the width of the column, let's head to the .blog-post class we created and change the value of the width to 50% on a large mobile breakpoint:
.blog-post {
width: 33.33%;
padding: 0 5px;
box-sizing: border-box;
margin-bottom: 30px;
}
/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
.blog-post {
width: 50%;
}
}
/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
.blog-post {
width: 100%;
}
}This will make sure that the content will still be readable, regardless of the device it will be appearing on.Â
Also, the title seems a bit big as well. We can reduce thefont-size by 40px when in mobile view:
#blog h2 {
font-family...
