CODEWITHSUNDEEP
htmlcssreactjsmedia-queriesjsx
Aditya Prakash
Aditya Prakash

Reputation: 59

how to scale down absolute positioned elements in the right way using CSS

i would like to ask how to scale down elements given absolute position so that they dont distort on reducing the screen size. Like i have attached an image below that shows the desktop view now how should i set the style of these elements so that on mobile view they should remain in same proportions (any other way except media queries?)

max-size min-size

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>

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

Upvotes: 0

Views: 1490

Answers (1)

Chizaram Igolo
Chizaram Igolo

Reputation: 1143

Here's how to fix this problem:

  • To prevent distortion of images, set height of images to auto.

  • For proportional resizing of images with respect to parent element (.obj-container) on screen resize, use percentage values for widths.

  • To prevent erratic positioning/displacing of images on screen resize, use percentage values for positioning. (Positioning with respect to rem means you are positioning the <img>s with respect to the font-size of the parent element or browser if parent element has no font-size define. This will only work so well at certain screen sizes but it is not enough. You need to position with respect to parent element's dimensions, hence percentages.)

  • For items 2 and 3 above to work properly, you need to give the <img>s' parent element (.obj-container) a width and height.

Like so (I use ellipsis ... for brevity):

.lamp {
    ... 
    top: -1.5%;
    right: 22%;
    width: 10%;
    height: auto;
}

.plane {
    ... 
    top: 2%;
    left: 13%;
    width: 15%; 
    height: auto;
}

.lampLight {
    ... 
    top: -2%;
    right: 25%;
    width: 10%;
    height: auto;
} 

.obj_container {
    position: relative;
    width: 100vw;
    height: 60vh;
    max-height: 80vh;
}

The top left, right and width values I gave for the <img>s are example values, feel free to change these values to whatever you desire.

Also, as you can see, I gave the .obj-container div a width of 100vw meaning it will take up the entire viewport (i.e screen) width. I also gave it a height of 60vh and a max-height of 80vh to handle resizing on smaller screens. You may change this values to whatever you desire as well.

Upvotes: 1

Related Questions