count down clock alignement center

Store Design
, , , ,

Topic summary

Goal: lower/center the countdown timer in the Plain Jane 2.0 Shopify theme (password/coming soon page).

Context: After sharing the store URL (bleuface.online), the timer became visible for review. The focus is on improving mobile layout.

Proposed fixes:

  • Quick adjustment (mobile only): In Assets > plain-jane.css, add a media query for max-width 705px that sets the .countdown-timer top to 50% (uses !important) to lower the timer vertically.
  • Complete centering (mobile only): In Assets > base.css, style.css, or theme.css, add a media query for max-width 705px targeting .password-bg-overlay .countdown-timer with position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) to center both vertically and horizontally.

Notes:

  • The second approach fully centers the timer and includes a screenshot demonstrating the result.
  • Steps to edit: Online Store > Themes > Actions > Edit code > relevant CSS file, then paste at the bottom and save.

Status: Solution provided with code and visual proof; awaiting confirmation from the requester.

Summarized with AI on December 15. AI used: gpt-5.
1

markie77_0-1730233615065.png
markie77_0-1730233615065.png475Ă—932 69.5 KB

i was wondering if theres a way to lower / center the countdown clock in plain jaine 2.0

1 Like
2

Hi @markie77

Please, share your store URL. Thanks!

3

Hi @markie77 ,

Please send the website link, I will check it for you

4

bleuface.online

5

thanks for replying back hopefully you can assist .

6

bleuface.online

7

I can’t see the countdown on the shared link.

8

hey check now

9

Hi @markie77 ,

Please go to Actions > Edit code > Assets > plain-jane.css file and paste this at the bottom of the file:

@media screen and (max-width: 705px) {
    .countdown-timer {
        top: 50% !important;
    }
}
10

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 705px) {
    .password-bg-overlay .countdown-timer {
        position: absolute; 
        top: 50% !important;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!