Banner is not longer responsive

On lines 574-581, you’ve got the banner set to a width of 882 pixels:

.banner-cnt {
  ... rest of CSS snipped for clarity ...
  width: 882px;
}

What are you trying to do? One thing you could do would be set it to a max-width instead. That way, it looks okay on smaller screens and you’ll still get the centered effect on larger screens:

.banner-cnt {
  ... rest of CSS remains the same ...
  max-width: 882px;
}

I tried, but the text doesn’t resize, and the background goes over the text on the top… Thank you anyway!

Hmm, I see what you mean. You could try using @media queries to use different styles at different screen widths:

@media screen and (max-width: 500px) {
  .banner-cnt {
    ... CSS rules go here ...
  }
}

@media screen and (min-width: 501px) and (max-width: 900px) {
  .banner-cnt {
    ... CSS rules go here ...
  }
}

@media screen and (min-width: 901px) {
  .banner-cnt {
    ... CSS rules go here ...
  }
}

You’d have to experiment with the different breakpoints and setting different font sizes and widths of the text area to get it right.

Thank you!!! I will try it!