I have a React application with a specific layout and styles that I’d like to make fully responsive across different screen sizes—from mobile devices to large desktops. I’ve already implemented some styles using CSS, but I’m struggling to ensure everything adapts correctly without breaking the existing design.

Here’s a simplified version of my App component and its corresponding CSS:

import { useState } from 'react';
import './App.css';
import image from './assets/image.jpg';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <div className="image-container">
        <img src={image} className="top-image" alt="Descriptive Alt Text" />
        <div className="centered-div">
          <div className="title-container">
            Build a self care routine suitable for you
            <div className="text-container">
              Take our test to get a personalized self care routine based on your needs.
            </div>
          </div>
          <button className='start-button'><span className='button-text'>Start the quiz</span></button>
        </div>
      </div>
    </div>
  );
}

export default App;

And here’s the corresponding CSS (App.css):

body, html, #root {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container {
  position: relative;
  display: inline-block;
}

.top-image {
  width: 100%;
  height: auto;
}

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 0, 0, 0.5);
  color: white;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 600px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
}

.title-container {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}

.text-container {
  font-size: 1rem;
  margin-bottom: 20px;
}

.start-button {
  width: 100%;
  max-width: 200px;
  height: 47px;
  padding: 14px 40px;
  border-radius: 8px;
  background: #C3EDFF;
  margin-top: 24px;
  font-family: Proxima Nova;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.49px;
  text-align: center;
}

.button-text {
  font-family: Proxima Nova;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.49px;
  text-align: center;
}

I’ve tried using percentage-based widths and max-width properties, along with media queries, but I’m encountering challenges in ensuring everything scales properly and looks good across all devices.

Specifically, I need help with:

Ensuring the .centered-div and .start-button adjust correctly based on screen size.
Handling font sizes and spacing to maintain readability across devices.
Any additional CSS tips or best practices for maintaining responsiveness without significantly altering the current design.

I appreciate any advice or suggestions on how to achieve full responsiveness while preserving my current layout and styles. Thank you!