trashie Posted November 25, 2021 Share Posted November 25, 2021 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! Link to comment
tuanphan Posted November 27, 2021 Share Posted November 27, 2021 Hi. Problem appears on iOS only or both iOS & Android? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
trashie Posted November 29, 2021 Author Share Posted November 29, 2021 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 :/ Link to comment
tuanphan Posted November 30, 2021 Share Posted November 30, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
trashie Posted November 30, 2021 Author Share Posted November 30, 2021 (edited) 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? 😄 Edited November 30, 2021 by trashie Link to comment
trashie Posted November 30, 2021 Author Share Posted November 30, 2021 (edited) @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! Edited November 30, 2021 by trashie tuanphan 1 Link to comment
tuanphan Posted December 2, 2021 Share Posted December 2, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment