custom h1 class not displaying on mobile

Site URL: https://halibut-alligator-y93x.squarespace.com/

hey guys, already got a lot of help from reading stuff here in the forum. but this problem I can't solve. so my first posting. 

I created different classes for displaying an img background instead of a color for the h1 titles. I embedded the classes with a code block. On desktop view it shows perfectly (and strangely the mobile view on squarespace itself works fine too) but when I open the page on a mobile device (iOS), the h1 titles don't show up at all. 

https://halibut-alligator-y93x.squarespace.com/
ALFsecret

the css I use

.goldfolie {
  color:#c3a343 !important;
  -webkit-text-fill-color: transparent !important;
  background: -webkit-linear-gradient(transparent, transparent), url(https://static1.squarespace.com/static/618116cd8cd8e779321cca26/t/618116ea8cd8e779321ccd71/1631621631207/goldfolie.jpg) repeat;
  background: -o-linear-gradient(transparent, transparent) !important;
  -webkit-background-clip: text !important;
padding: 11px 0;
}  

and the html code for the code block

  <h1 class="goldfolie">
 <p>Trash is gold. Dig it. 
   </p>
</h1>

urgent help needed! thanks in advance!

Hi. Problem appears on iOS only or both iOS & Android?

Just checked it with an Android and it works there.

Just opened the website with Safari on Desktop und there I have the same problem :/

22 hours ago, trashie said:

Just checked it with an Android and it works there.

Just opened the website with Safari on Desktop und there I have the same problem :/

Some of the code doesn't really work well on Safari/iOS, nor can I think of a workaround with this code. You try posting the problem to Squarespace Customization Resource Group on Facebook

Thanks for the tip anyway, will do so! 

But as we want to publish the page by tomorrow, I thought of a workaround which doesn't show the image but at least different colors for the h1 headings. To do that, I have thought of quite a weird but effective way: 

1) stop the class from displaying on mobile 

@media only screen and (max-width:640px) 
{.goldfolie {display: none !important;}}

2) add a h1 text block in the color of my choice 

3) stop the h1 text block from displaying on desktop but showing on mobile 

#block-yui_3_17_2_1_1638279140145_8428
{display: none !important;}

@media only screen and (max-width:640px) 
{#block-yui_3_17_2_1_1638279140145_8428
  {display: block !important;}}

Is there a more elegant way to have the same effect? 😄

@tuanphan I got the solution from the Facebook group you recommended!

The correct code looks like this: 

.goldfolie p {
display: inline-block;
color: transparent !important;
padding: 11px 0;
background-image: url("https://static1.squarespace.com/.../1631621.../goldfolie.jpg");
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-moz-background-clip: text !important;
-moz-text-fill-color: transparent !important;
-ms-background-clip: text !important;
-ms-text-fill-color: transparent !important;
background-clip: text !important;
text-fill-color: transparent !important;
}

Maybe you could help me with another issue I have with the headings. As you can see there is a lot of white space between the title and the body text.

In the config mode the space isn't that big. What's the reason and how can I solve it? Thx!

On 12/1/2021 at 6:19 AM, trashie said:

@tuanphan I got the solution from the Facebook group you recommended!

The correct code looks like this: 

.goldfolie p {
display: inline-block;
color: transparent !important;
padding: 11px 0;
background-image: url("https://static1.squarespace.com/.../1631621.../goldfolie.jpg");
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-moz-background-clip: text !important;
-moz-text-fill-color: transparent !important;
-ms-background-clip: text !important;
-ms-text-fill-color: transparent !important;
background-clip: text !important;
text-fill-color: transparent !important;
}

Maybe you could help me with another issue I have with the headings. As you can see there is a lot of white space between the title and the body text.

In the config mode the space isn't that big. What's the reason and how can I solve it? Thx!

It looks fine here. Which space?