Responsive banner

Hello there,
Currently, I am doing the Tea Cozy exercise. I want to make the page fully responsive and I was wondering how I can make the ‘our mission’ banner scaleable.

My solution was to use % margin for the mission class, but it’s hard to exactly calculate the 700px height - as it was asked in the design brief. Could someone please advise for a more elegant solution?

<div class=banner>
  <div class=mission>
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
</div>
html, body {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
  margin: 0;
  padding: 0;
}

.banner {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mission {
  width: 1200px;
  background-color: black;
  margin: 24% 0;
}
1 Like

Well I see two ways of doing this, the one you just said, use percentages, or there is a way, but it won’t gonna be the way you think, use media queries, there will be a lot to make it look like percentages, or just a few so it will only resize it if it’s a phone or a tablet… so as I said percentages are the elegant way, but if you want to try media queries:

@media only screen and (min-width: 480px) and (max-width: 768px) {
  .banner {
    /*something*/
  }
}

This is the telephone size.
Also if you want to make it tablet compatible you can use:

@media only screen and (min-width: 1024px) and (max-width: 1600px) and (orientation: landscape) {
  .banner {
    /*something*/
  }
}

Portrait or landscape is the value that it accepts.
Here are the breakpoints(image from codecademy):


Hope this helps :grinning:

1 Like

Hi @lolfail, thanks for the reply. Good to know that I found the best solution there, thanks for confirming. Yes, I didn’t want to use media query intentionally on this occasion but that’s definitely an option as well :slight_smile: