Can anyone advise on how to properly scale down elements with absolute positioning so they maintain their proportions when the screen size is reduced, without using media queries? I have included an image below showing the current desktop view.
https://i.sstatic.net/FaH4V.png https://i.sstatic.net/uONiS.png
Here is the JSX code:
<div className={styles.relativeParent}>
{/* <img src="/home_6.png" alt="lamp" className={styles.lamp} /> */}
<div className={styles.obj_container}>
<img src="/home_lamp.png" alt="lamp" className={styles.lamp} />
<img src="/home_10.png" alt="plane" className={styles.plane} />
{/* <img src="/home_7.png" alt="lamp-light" className={styles.lampLight} /> */}
<p className={`${styles.homeSubHeading} ${styles.narrowHeading}`}>
Finding it difficult to start? We’re here to{" "}
<span className={styles.gradient}>help</span>{" "}
</p>
</div>
<p className={`${styles.homeContent} ${styles.narrowText}`}>
At Raisze, whether you’re a student, designer, young professional,
restarting your career or a visionary and dreamer, as long as you’re
a startup builder, you will find support. We help early-stage
startups validate, raise funds and find first customers with a
platform that enables reward based crowdfunding.
</p>
</div>
And the corresponding CSS code :
.obj_container{
position: relative;
}
.lamp {
position: absolute;
top: -1.5rem;
right: 22rem;
width: 9rem;
}
.plane {
position: absolute;
width: 9rem;
top: 2rem;
left: 13rem;
}
.lampLight {
position: absolute;
width: 10rem;
top: -2rem;
right: 25rem;
}
.homeSubHeading {
margin: 0;
margin-bottom: 1rem;
font-size: 3rem;
font-weight: bold;
}