How can increase the spacing between the top of the page and the countdown on mobile (dawn)?

Store Design
,

Topic summary

A user seeks to increase the spacing between the top of the page and a countdown timer on mobile devices for a Shopify store using the Dawn theme.

Solutions Provided:

Two support teams (GemPages and PageFly) offered CSS-based solutions:

  • Both recommend accessing the theme code via Online Store → Themes → Edit Code
  • GemPages suggests adding code before the </body> tag in the theme.liquid file
  • PageFly proposes inserting CSS in the base.css file using a media query targeting mobile screens (max-width: 767px) with margin-top: 35px !important applied to a specific countdown element

Status:

The discussion remains open with no confirmation from the original poster about whether either solution resolved the spacing issue. Both solutions involve custom CSS modifications to adjust mobile layout spacing.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

how can increase the spacing between the top of the page and the countdown on mobile (dawn)? website: www.10xfuel.com - thank you!

10xfuel_0-1672757443074.png
10xfuel_0-1672757443074.png582×146 54.4 KB

2

Hello @10xfuel

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

1 Like
3

Hi @10xfuel

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file base.css

@media screen and (max-width: 767px){
span#epb_message_one {
margin-top: 35px !important;
}
}

Hope this answer helps.
Best regards,
Victor | PageFly