strawberry12345

HI! Thank you so much for replying!! The code is supposed to style the page from this: to this:

When I click on "Custom CSS" everything goes where it's supposed to, but when I refresh the page it doesn't stay. Is there something I'm missing from the code? I added !important to parts of the code to see if it'd help but it didn't affect the issue at all.

Site URL: https://www.earthandherflower.com/new-page-1

I'm having trouble identifying what's wrong with my code - as soon as I leave the custom CSS editor, it reverts back to how it was before the code was implemented. Can someone please help identify what's wrong with the code?

Here's the code:

//spinning text css
@media only screen and (max-width: 640px) {
#collection-608f1e4137e7102ac6e99726{
#page .page-section:nth-of-type(1) {
.sqs-video-background {
display: none;
}

.section-background {
background: url("https://static1.squarespace.com/static/5f1f3d37894ee95de5113464/t/608f4f28df42846165f0c995/1620004649252/Untitled+design+%2821%29.png");
background-repeat: no-repeat;
background-size: auto 100%;
}
}
}
}

//css turn image
@keyframes turn {
  from { transform: rotate(0deg) }

  to { transform: rotate(360deg) }
}

//size of spinning thing -desktop
#block-yui_3_17_2_1_1620006772828_5634{
    animation: turn 10s linear infinite;
  max-width:170px!important;
    }

//move 'about' text desktop
#block-yui_3_17_2_1_1620007817448_4955 {
    margin-left: 0px;
    margin-top: -100px!important;
}

//move 'about' text mobile
@media screen and (max-width: 640px) {#block-yui_3_17_2_1_1620007817448_4955 {
    margin-left: 0px;
  margin-top: -25px!important;}

}

//move spinning circle -desktop
#block-yui_3_17_2_1_1620006772828_5634 {
    margin-left: 650px!important;
    margin-top: 0px;
}

//move and size spinning thing - mobile
@media screen and (max-width: 640px) {#block-yui_3_17_2_1_1620006772828_5634 {
    margin-left: 65px!important;
  margin-top: 0px;
  max-width:180px!important}

}