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.