0

I made a little square box rotating on itself next to a little text. And i positionate it accordingly to what i'm looking for, but sadly, when i play with the screen dimension for testing responsivity of the website, the square is moving too much.

I usually only do responsive by media queries, but this time, since the square is moving at every pixel, it would take A LOT of media queries to make it look fixed to the text.

Theres is any better way to make this animation responsive than spamming media queries to change his position?

here's the HTML code :

  <!-- Carré jaune animé -->
<div class="rotating-square"></div>

here's the CSS code :

.rotating-square {
  position: absolute;
  bottom: -270%; /* Ajuster la position verticale */
  right: 15%;
  transform: translateX(50%);
  width: 150px; /* Ajuster la taille du carré  */
  height: 150px; /* Ajuster la taille du carré */
  background-color: rgb(17, 0, 255);
  z-index: -1; /* Mettre le carré derrière le contenu pour ne pas affecter la lisibilité du texte */
  animation: rotateSquare 8s linear infinite; /* Appliquer l'animation */
}

/* Animation pour faire tourner le carré */
@keyframes rotateSquare {
  from {
    transform:  rotate(0deg);
  }
  to {
    transform:  rotate(360deg);
  }
}

on little screen on bigger screen (and closer to what i'm looking for)

I want to learn better way (more efficient, less time consuming) than media queries for make something responsive

i found this wich was pretty usefull : How to make a position absolute css animation responsive?

But since in my case it's already a single thing (.rotating-square) to move, it's still dont really change what i'm looking for.

EDIT : Here's the playground ! : https://codepen.io/Kurio-the-scripter/pen/qBLEemo

At my full screen (1980x1080) the green box is between the two colored text. But if you play with the scale of the windows, you will see the box moving though the page, getting over the text, i want to avoid it that and keep it his first place. (beetween the text)

EDIT 2 : Even if the situation and solution wasn't the same, the edit about using margin instead other things to center an object for responsivity worked like a charm !

Thanks !

jawad fedala
  • 3
  • 3
  • 1
    Can you please update this post to include a [mcve]? Without providing enough code to recreate the issue, it is unlikely anyone will be able to provide you with much targeted assistance or guidance. – Alexander Nied Aug 22 '23 at 13:41
  • push the square into another square container with a width of at least 1.42 or sqrt(2*150px). – tacoshy Aug 22 '23 at 13:46
  • I edited and added a playground ! – jawad fedala Aug 22 '23 at 13:54
  • use: `translate: 50% 0;` (instead of `transform: translateX(50%);`) and use: `rotate: 360deg;` instead of `transform: rotate(0deg);` - otherwise you'll override the previously defined `transform` properties. The second solution is to also define the translation like: `transform: translateX(50%) rotate(360deg);` – Roko C. Buljan Aug 22 '23 at 14:16

0 Answers0