Tengo un banner de imagen con algo de texto y botones encima y dos widgets justo al lado en un flex (mira la imagen como referencia). Quiero que respondan cuando la pantalla cambie de tamaño.

 <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>

Cómo es la interfaz de usuario en un tamaño de pantalla

Aquí está el CSS actual:

 .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; }

¿Cómo puedo hacer que respondan a todos los tamaños de pantalla?