Making the hero section responsive
Let's check how responsive our hero is at the moment:
iPad view and iPhone 8 view
As we see, there is nothing to change in the iPad view; however, for the iPhone view, it lacks padding and the title seems a bit too big.Â
The way I can see to fix this without too much code is to add some padding to thecontainer, the container we have implemented in every section:
.container {
max-width: 940px;
margin: 0 auto;
}
/* Tablet Styles */
@media only screen and (max-width: 1024px) {
.container {
padding: 0px 15px;
}
}We will add some padding from the tablet breakpoint, so it will affect all lower breakpoints too.Â
Let's now fix our the title. This will be straightforward; we will just need to find our .hero-title class and add some media queries:
/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
.hero-text .hero-title {
font-size: 90px;
}
}That's it! You can always change the value as you wish, as well.Â
