How can i make a gif stay in the fixed position when the web page is rescaled

Store Design
, ,
1

Hello everyone!

I need help to edit this liquid code in order to make the gif stay in the fixed position(as it is sliding to the right), whenever the webpage is rescaled:

body {
  margin: 0;
  display: flex;
  justify-content: flex-end; /* Align content to the right */
  align-items: center;
  height: 100vh;
}
.gif-container {
  text-align: center;
  margin-right: -580px; /* Adjust margin to move GIF to the right */
}
.gif-container img {
  max-width: 4%; /* Set image size */
  height: auto;
}
@media (max-width: 767px) {
  .gif-container {
    margin-right: 0;
  }
  .gif-container img {
    max-width: 20%;
  }
}

Link to the page: https://0b798d-3.myshopify.com/pages/about-us

Looking forward to your replies,

Best wishes,
Farid Mirzayev

2

Hi @Farid117

This is David at SalesHunterThemes.

Thank you for your question.
You can try follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

.gif-container{
    position: fixed;
    right: 0;
    top: 50%;
}
3

Hey David!

Thank you for your reply,

I have tried the given solution and it seems like the gifs are now stuck to the background and moved across the screen when scrolling.

Is there any other possible solutions?

Sincerely,
Farid Mirzayev