vanessakrystin

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.

Super late but I've had this issue with TWO client websites now where the Custom Font won't adhere to the code on Mobile (Safari) even though it shows up perfectly on the Squarespace Mobile preview.

My fix was to create an <a class> which shows up perfectly on Safari.

Quote

CODE BLOCK

<a href="" class="classname">Text Goes Here</a>

Quote

CSS

.classname {
  background-color: none;
  color: #XXXXXX;
  padding: 0px;
  font-family: 'FONT' !important;
  font-size: 40px;
  letter-spacing: 0px;
  line-height: 42px;
  text-decoration: none;
  pointer-events: none;
}
@media screen and (max-width:767px) {
.classname {
  background-color: none;
  color: #XXXXXX;
  padding: 0px;
  font-family: 'FONT' !important;
  font-size: 30px;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  pointer-events: none;
}}

I hope that helps!

On 10/14/2021 at 10:05 PM, tuanphan said:

@VanesssaG Hi. It looks works to me

@tuanphan

I have it set back to a video source as the YT iframe did not work. It is a live website so I couldn't have it be a dead video source. I could make a dummy page with the iframe in there for you to see the source if that helps?

@bangank36

It is the Family Law "Trailer" Link
https://www.sekyiwabrooke.com/film

 

Site URL: https://www.sekyiwabrooke.com

Hey all,

I found a method to add a lightbox link but I'm not sure how to get it to work with an <iframe> to embed Youtube videos? I've tried with a regular <video> and that works fine but the <iframe> is blank black.

Page - Code Injection

Quote

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />   <script src="//code.jquery.com/jquery-latest.js"></script> <script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script></link>

Code Block #1 (The Lightbox Info)

Quote

<div style="display:none;">
 <div id="bio-john" style="max-width:375px;">
<center>
  <video controls autoplay>
  <source src="#" type="video/mp4">
</video>
   </div>
   </div>

Code Block #2 (The Link)

Quote

<a href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" data-featherlight="#video-pop">TRAILER</a>

The video pops up but it's not loading/linking to the Youtube url. I also don't know how to fix the sizing to make the lightbox bigger. Any help would be appreciated!

Thanks,

On 7/3/2021 at 11:51 PM, NickScola said:

Make sure you convert your fonts to support all font types. Here's an example CSS font fact 

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You can convert your fonts and get them downloaded to these formats here: https://transfonter.org/ if it still doesn't work let me know, but it helps a lot if you do this first.

I've already tried this method, it did not work to fix it. The only work around to making the H1 + H2 work is by putting it in a link with no pointer event 🤷🏻‍♀️

Site URL: https://orchid-flute-gfwg.squarespace.com/

Hi all,

Can anyone help me with my coding? I'm pretty sure everything is correct, and it shows up fine on the mobile via Squarespace but on my phone, the custom fonts aren't showing up at all.

I'm on an iPhone 8 Plus on Safari.

Code

// Custom Font //
@font-face {
  font-family: Druk;
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d79feed113772d538dfa60/1624743919175/Druk+Wide+Super.otf);
}

@font-face {
  font-family: Euclid;
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a016d2d2442e68e90958/1624743958321/EuclidCircularA-Regular.ttf);
}

@font-face {
  font-family: Oaklinn;
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a0fa2b37c143c11961f9/1624744186366/Oaklinn.otf);
}

// Custom Fonts Implement //
p {font-family: Euclid;}
h1 {font-family: Druk;}
h2 {font-family: Euclid;}
h3 {font-family: Druk;}
h4 {font-family: Oaklinn;}
h5 {font-family: Euclid;}
button {font-family: Druk; font-size: 10px !important;}
.sqs-block-button-element {font-family: Druk; font-size: 10px !important;}
h3.portfolio-title {
  	font-family: Druk !important;
    color: white !important;
    font-size: 15px !important;
}
.mobile-bar-wrapper *, h1 {
    font-family: Druk !important;
}

Any help would be appreciated!

19 hours ago, tuanphan said:

You want, on mobile, it will be

3 class

montly

10 class

60 min

single class

45 min

Is this right?

@tuanphan yes exactly! with the 7 Day Trail being last.

1 hour ago, ArminB said:

Hi. You'd have to change the site from private to password-protected (Settings > permissions) so we can see it

Oops sorry it's public now!

Hi,

I'm looking to change the order of my code blocks to go by row right-to-left instead of column but can't seem to get the coding right.

I've tried the following, but I don't think I'm targeting the right block. I've also tried the individual #block-yui but it didn't work either. Anyone have any suggestions?

@media only screen and (max-width: 640px) { div#pricing+.row, div#pricing2+.row {
  display: flex;
  flex-direction: row !important;
  }}

Site: https://orchid-flute-gfwg.squarespace.com/book-now

Thanks,

@creedon

That seemed to work the same, but unfortunately the positioning is still wonky. Should I be changing it from absolute to fixed?

@marsharosenblatt Wow this worked!

Do you happen to know how I can fix the placement of the Twitch iframe though as it's coming up quite wonky on my end?

contact-festival.com/stream

Let me know if you can help, thanks!

On 9/19/2020 at 8:54 AM, tuanphan said:

Add to Home > Design > Custom CSS

.portfolio-hover-bg-overlay {
    opacity: 0 !important;
}

 

Unfortunately I've already tried that and it doesn't work. That references to the hover over images placed within each link, but not the BG of the page.

I've found and attached the code that effects that file, but I'm not sure how to change it as I've tried [alt=...] without anything working.

Do you have any suggestions?

On 7/16/2020 at 9:56 AM, theresa.southern said:

@jpwelchux

I know it's been awhile, but here is one option for you. Get the URL of the photo and use this CSS. Change opacity as desired. This is for Squarespace 7.1 and works for background images. You can always save the image with the opacity lowered but I like having the flexibility to change the opacity. 

[data-image="https://static1.squarespace.com/static/5ed54b8712824d33607048a7/t/5f10815a05b113770412e64c/1594917213740/business-executive-carrying-briefcase-walking.jpg"] {
  opacity: .5;
}

 

I'm also looking into changing the forced Opacity Overlay on this page's (nicetrycreative.com/packages) background but I've tried your code while inputting my BG image url but it didn't do anything 😞

Do you have any other suggestions?

Used:

[data-image="https://images.squarespace-cdn.com/content/v1/5f41b993ec8a536cf1ca5b7a/1600397794700-UZIR481TQ63LIUEIDRZT/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/NiceTry_ContactPage.jpg?format=2500w"] {
  opacity: 1;
}

Do I need to add something before the [data-image..]?

Site URL: http://nicetrycreative.com

Hi,

Running a 7.1 and want to figure out how to turn off the opacity tint that is being added to the Background in the Hover List page of the preset Portfolio Page.

With all other pages, adding a Background has the option of changing the Opacity Overlay % but on Portfolio pages, it is missing that option and automatically adds a 12-15% overlay. I've already changed all the Opacity options in the Design but as you know, with 7.1 the opacity is never 0% (which is so frustrating and stupid)

Does anyone know the code in order to change this?

nicetrycreative.com/packages
Password: nicetry

Any help is appreciated!