CODEWITHSUNDEEP
javascripthtmlcssaspect-ratio
Skizzotrick
Skizzotrick

Reputation: 13

How to keep aspect ratio, including position for phones? CSS code

I have a spinning wheel which works great on PC but it changes its size, position, and almost everything when I'm trying it on my phone.

Also, there is an image in the center of the spinning wheel which should stay there on phones too.

Here is the spinning wheel:

Here is the spinning wheel

Here is the code:

.image {
    position: absolute;
    left: 30%;
    width: 300px;
    height: 300px;
    -webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	
	animation-play-state:paused;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(1770deg); }
						 }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(1770deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(1770deg); transform:rotate(1770deg); } }
<h1 id='pas'>Pasul 3: Incercati-va norocul la ruleta cu cadouri! </h1>
<h2> Aflati instant ce ati castigat invartind roata!</h2> 
<br>
<br>
<br>
<div style='position: relative; left: 0; top: 0;'> 
  <img class='image' src='images/ruleta.png' alt='' id='rlt' width='120' height='120'> </img>//this is the wheel
  <img id='schimba' src='images/iph.png' width='64px' height='64px' style='position: absolute; top: 117px; left: 45%;'></img><img id='arrow' src='images/arrow.png' width='70px' height='70px' style='position: absolute; top: 300px; left: 48%;'></img> 
</div> //this is the image in center of the wheel

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Upvotes: 0

Views: 121

Answers (1)

JustH
JustH

Reputation: 1402

This is a good candidate for using flexbox to keep items centered, but basically the issue is that you want to make the containing div the size of the wheel and center it (using flexbox or margin: 0 auto and then center the the center the images on top of each other inside using absolute positioning. here is a working flexbox example http://codepen.io/JustH/pen/rLYgQX

For what it's worth, you also should avoid using <br> tags for layout. Use margins or position to achieve the spacing you want.

Upvotes: 1

Related Questions