Jump to content

Text Animation Preventing Editing on Site

Recommended Posts

Site URL: https://tomato-bronze-atwb.squarespace.com

Hey everyone. I added this text animation to my site and its working properly however it prevents me from editing anything else on the page. I have to delete the code block in order to make any other changes to my site. Heres both the HTML and CSS code I added, if anyone sees the problem I would really appreciate some help! Thanks! P.s password to my site is 2021 if you need it

HTML:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
      <div class="content">
        <div class="slider-wrapper">
          MODERN WEB DESIGNS FOR 
          <div class="slider">
              <div class="slider-text1">ORIGINAL </div>
              <div class="slider-text2">INNOVATIVE</div>
            <div class="slider-text3"> CREATIVE</div>
          </div>
            <div class="slider-text5">ENTREPRENEURS</div>
          
          </div>
        </div>       
      </div>
    </body>
</html>

 

CSS: 

 

@media only screen and (min-width: 641px) {
.slider-wrapper {
  font-size: 22px;
  color:    #212a32;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider{
  height: 45px;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 45px;
  padding:4px 7px;
  margin-bottom: 45px;
  text-align: center;
  box-sizing: border-box;
  
}
.slider-text1 {
  
  animation: slide 7s linear infinite;
}
.slider-text2 {
}
.slider-text3 { 
}
.slider-text4 {
}

@keyframes slide {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71%{margin-top:0px;}
  100% {margin-top:0px;}
}
}

Link to comment
  • Replies 5
  • Views 600
  • Created
  • Last Reply

For the HTML I think you will only need the following.

        <div class="slider-wrapper">
          MODERN WEB DESIGNS FOR 
          <div class="slider">
              <div class="slider-text1">ORIGINAL </div>
              <div class="slider-text2">INNOVATIVE</div>
            <div class="slider-text3"> CREATIVE</div>
          </div>
            <div class="slider-text5">ENTREPRENEURS</div>
          
          </div>

I haven't tested this but let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 months later...

@ValentineM

Right. It appears it was designed only for desktop.

@media only screen and ( min-width : 641px )

If you want to give it a go on mobile then when you copy the CSS from the OP's post then you will want to leave out the first and last lines.

@media only screen and (min-width: 641px) {
}

That removes the desktop only restriction.

Also note folks that I updated my suggested modification to the HTML as I think there was a class conflict going on.

Again I haven't tested any of this.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.