Jump to content

HTML/CSS Help - Code Not Working On Safari

Recommended Posts

Site URL: https://reed-seadragon-aamj.squarespace.com/

Hi there,

Added this cool flip on hover div boxes for my website but unfortunately, they do not work properly on Safari. I primarily use Chrome so would love to know if anyone knows how I can adjust the code to fix this.

Website: https://reed-seadragon-aamj.squarespace.com/
Pass: hello
Page: https://reed-seadragon-aamj.squarespace.com/team

Quote

CSS:

// TEAM //
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  position: relative;
  margin-top: 50px;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
@media screen and (max-width:767px) { .flip-box {
  position: relative;
  margin-top: 120px !important;
  margin-bottom: -130px !important;
}}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}

.flip-box-front img {
  border-radius: 10px;
}

.flip-box-back {
  background-color: #00FF75;
  color: white;
  transform: rotateY(180deg);
}

.flip-box-back h2 {
  font-family: 'Gotham Black';
  color: #09226B !important;
  font-size: 40px;
  margin-top: 0px !important;
  position: relative;
  color: #09226B;
}
@media screen and (max-width:767px) { .flip-box-back h2 {
  margin-top: 0px !important;
  }}
.flip-box-back h3 {
  margin-top: -30px !important;
  position: relative;
  font-family: 'Gotham Medium';
  font-size: 20px;
  color: #ffffff !important;
  display: block;
}
@media screen and (max-width:767px) { .flip-box-back h3 {
  margin-top: -30px !important;
  }}
.flip-box-back h4 {
  margin-top: -30px;
  font-family: 'Gotham Black';
  font-size: 16px;
  color: #09226B !important;
  display: block;
}
@media screen and (max-width:767px) { .flip-box-back h4 {
  margin-top: -30px !important;
  }}

.flip-box-back p {
  margin-top: 0px;
  font-size: 10px;
  color: #09226B !important;
  display: block;
  padding-right: 20px;
  padding-left: 20px;
  line-height: 1.1rem;
}
@media screen and (max-width:767px) { .flip-box-back p {
  margin-top: 0px !important;
  }}

Quote

HTML:

<div class="flip-box">
      <div class="flip-box-inner">
        <div class="flip-box-front">
          <img src="https://static1.squarespace.com/static/61e89aafceee0115f1c8f842/t/61f89c0f6faed02fd91c214c/1643682833873/Team_Aspire.png" style="width: 300px; height: 300px;">
        </div>
<div class="flip-box-back">
<h2>ASPIRE</h2>
<h3>LUKA ROLOVIC</h3>
<h4>DPS</h4>
<p>
Entering his 2nd season in the Overwatch League, Aspire turned a lot of heads in his debut season with the Toronto Defiant. Known best for his Tracer mechanics Aspire is looking to take the league by storm this year with his epic pulsebombs.    
</p>
  <div class="social-icons">
  <a href="https://twitter.com/Aspire_OW" target="_blank">
  <i class="fab fa-twitter fa-xs blueiconcolor" aria-hidden="true"></i>
  </a>
  <a href="https://www.twitch.tv/owaspire" target="_blank">
  <i class="fab fa-twitch fa-xs blueiconcolor" aria-hidden="true"></i>
  </a>
</div>
        </div>
      </div>
    </div>

 

If anyone could look at this and let me know, that would be amazing!

Thank you in advance.

Link to comment
  • Replies 1
  • Views 333
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.