I am trying to set up a CSS RWD to have a Case image, Motherboard, CPU and GPU to stay in place even though i switch width and height of the screen. I need to make it responsive. But is there any way to keep them from flipping around? When i use RWD inspector and change the settings around within the breakpoint of mobile it just breaks.
Reason i want to do this is because if JS is not enabled i want it to be static, but when it's enabled i can just animate it from the left to the right in it's original place when the document is loaded, as a welcome animation. I just cant seem to find a sweetspot with the CSS to make it fit in every resolution in place.
I am not allowed to use any framework and needs to be raw HTML CSS and JS only.
If i cant fix it this way i'll make it an image and just use image maps, but i really want to animate it.
@media only screen and (max-width: 756px){
#animation{
position: relative;
margin: 0 auto;
bottom:0vh;
Left: 40%;
width:100vw;
height: 50vh;
/* overflow: hidden; */
/* background-image: url("../images/plucked/case.png");
background-repeat: no-repeat;
background-size:contain; */
}
#caseAnimated{
position: absolute;
top:0vh;
width: 50%;
Left: 0vw;
}
#moboAnimated{
position: absolute;
top:0vh;
width: 37%;
Left: 0vw;
}
#cpuAnimated{
position: absolute;
top: 62px;
width: 10%;
Left: 15vw;
}
#cpuAnimated:hover{
outline: auto;
border: brown solid 2rem;
z-index: 2;
}
#gpuAnimated{
position: absolute;
top: 22vh;
width: 30%;
Left: 2vw;
}
#gpuAnimated:hover{
outline: auto;
border: brown solid 2rem;
z-index: 2;
}
Is there any way to do this right?
The Github is https://github.com/Razoorsharp/MM-4