I am using Visual Products Configurator as per client needs. The product is a bike, and it is divided into 4 parts.

1. Bike body
2. Front wheel
3. Back wheel
4. Seat

I am trying to fix them in one place, but when I decrease my window size (responsiveness), it moves to another place. I am using % for width, left & right etc properties. But it still not fitting in one place.

Seems like i will have to make a lot of media queries for it?

I am finding a short solution, a better solution.
Code:

#vpc-preview {
    padding: 30px;
    position: relative;
}
#vpc-preview img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  display: block;
}
#vpc-preview img:first-child {
    max-width: calc(100% - 100px);
    position: relative;
}
#vpc-preview img:nth-child(2) {
    width: 15%;
    left: 34%;
    top: 39%;
    transform: translate(-50%, -50%);
}
#vpc-preview img:nth-child(3) {
    width: 25%;
    inset: auto auto 5px 7%;
}
#vpc-preview img:last-child {
    max-width: 25%;
    inset: auto 15% 5px auto;
}

<div id="vpc-preview"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Body.png" style="z-index:1" data-component-id="component-61c5cd5b45c6d"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Seat.png" style="z-index:1" data-component-id="component-61c5cd5b1e09c"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Front.png" style="z-index:-1" data-component-id="component-61f2bc32489e0"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Rear.png" style="z-index:-1" data-component-id="component-61f2bc7c570e7"></div>

I am stuck, don't know how to make it perfect so that it works for other screens too. Please help me.

CodePudding user response：

Use one container with 4 areas (seat, tire1, tire2, body). All your photos should be the same proportion from the start. Then you position your zones in % and you also adjust their size in % compared to the container. Only Percent, no Pixel units.

Or use Canvas

CodePudding user response：

You can Also use the margin-bottom, margin-right, margin-left, margin-top to change the position of it