Jump to content

How to make two block layers stay together in Squarespace site

Recommended Posts

I have a css code block with a countdown timer layered on top of a background image in my Squarespace page. The background image is for the countdown timer - the issue is that when i resize the page, or view on different devices like Iphone etc, the background image misaligns with the countdown timer. Is there any way to avoid this happening and keep them aligned all the time?

https://flamingo-mauve-t7fb.squarespace.com/laiva-gold-equity

Thanks

Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi, that's how it should look on mobile, but i've noticed on other mobile devices the countdown clock is either too high or too low. Also when i reduce the size of my screen on desktop the countdown timer moves up and down, not aligning with the green background image properly.

For example when i decrease the screen size on desktop it starts to look like this:

image.png.a0f779075836b1b961b9ca28190e4a1b.png

Then I decrease more and it looks like this, with the text below it also going out of size:

image.thumb.png.d2c60ef22b2fa1974ae4bc7a8bd334f8.png

 

 

Link to comment

With number in the box, I think we can't control this, but can you send embed code? I will try testing it on another platform

With text overlap box, we need to use code to fix this. If you still want code, let me know, we will check & give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

With number in the box, I think we can't control this, but can you send embed code? I will try testing it on another platform

With text overlap box, we need to use code to fix this. If you still want code, let me know, we will check & give the code

Thanks, actually if there is a better code for the countdown timer i would use it instead but this is all i found so far. Code that i'm currently using is below:

<script src="https://cdn.logwork.com/widget/countdown.js"></script>
<a href="https://logwork.com/countdown-1j8e" class="countdown-timer" data-style="columns" data-timezone="Europe/London" data-textcolor="#ffffff" data-date="2023-10-02 18:00" data-digitscolor="#ffffff" data-unitscolor="#ffffff">. </a>

Also this timer links to their page which is not ideal for what i want. Would prefer it not to link. If you have a better code for this that i could use that would be great.

Thanks

Link to comment

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.