OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I make my React app 100% responsive while keeping existing styles intact?

  • Thread starter Thread starter gggggggggggggg
  • Start date Start date
G

gggggggggggggg

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

Code:
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):

Code:
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!

<p>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.</p>
<p>Here's a simplified version of my App component and its corresponding CSS:</p>
<pre><code>
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;


</code></pre>
<p>And here's the corresponding CSS (App.css):</p>
<pre><code>
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;
}


</code></pre>
<p>I've tried using percentage-based widths and <code>max-width</code> properties, along with media queries, but I'm encountering challenges in ensuring everything scales properly and looks good across all devices.</p>
<p>Specifically, I need help with:</p>
<p>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.</p>
<p>I appreciate any advice or suggestions on how to achieve full responsiveness while preserving my current layout and styles. Thank you!</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top