'How to make image banner and two div cards responsive for every sreensize

I have an image banner with some text and buttons on top of it and two widgets right next to it in a flex (watch image for reference). I want them to be responsive when the screen changes sizes.

<div className="tabs">
          <div className="tabs-container">
            <img src={MainBG} alt="background" className="banner-img" />
            <div className="top-text">
              <div>
                <h1>
                  Track Crypto Activity <br /> For Smarter Trading
                </h1>
                <button className="join-button"> Join Now</button>
                <button className="academy-button"> Crypto Academy</button>
              </div>
            </div>
          </div>
          <div className="widgets">
            <TechnicalAnalysis
              colorTheme="dark"
              width="280"
              height="305"
              symbol="BITSTAMP:BTCUSD"
            />
            <TechnicalAnalysis
              colorTheme="dark"
              width="280"
              height="305"
              symbol="BINANCE:ETHUSDT"
            />
          </div>

How the Ui is on one screen size

Here is the current CSS:

.tabs {
  display: flex;
  overflow: scroll;
  width: 100%;
}
.banner-img {
  width: 95%;
}
.tabs-container {
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
}

.top-text {
  position: absolute;
  margin-left: 30px;
  display: flex;
  justify-content: space-around;
  color: white;
  top: 50px;
}

.join-button {
  background-color: #bb46e2;
  cursor: pointer;
  color: white;
  padding: 10px;
  width: 90px;
  border-radius: 10px;
  border: none;
}

.academy-button {
  background-color: transparent;
  cursor: pointer;
  padding: 10px;
  border: 1px solid white;
  color: white;
  border-radius: 10px;
  margin-left: 15px;
}

.academy-button:hover {
  background-color: white;
  color: #bb46e2;
}

.widgets {
  display: flex;
  flex-direction: row;
  width: 50%;
  justify-content: space-between;
  margin-top: 20px;
  margin-right: 30px;
}

How do I make these responsive for all screen sizes?

javascriptcssreactjs


Solution 1:[1]

You can use media queries. You can use those it change the styling of elements depending on the screen size. Read the documentation here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ethan

Related Questions