Dawn Theme - Removing white space from home page (MOBILE)

Store Design

Topic summary

Goal: Remove excess white space on the mobile home page in the Dawn theme so only the image is visible.

Key steps and info:

  • Multiple replies requested the store URL to diagnose; the URL provided is http://www.artistbricks.com.
  • Proposed fix 1: Edit Assets/base.css and set the .gradient class to use background-size: cover !important (intended to make the background image fill the container).
  • Proposed fix 2: Add a mobile-only CSS rule (@media max-width: 749px) for .gradient that sets a specific background-image URL, disables repeat, and forces background-size to 100% 100% !important (aimed at eliminating white space on small screens).

Technical notes:

  • .gradient is a Dawn theme class for section backgrounds; base.css is the theme’s stylesheet via Online Store → Theme → Edit code.
  • The second solution includes a concrete image asset URL and a media query targeting screens under 750px.

Status:

  • No confirmation from the original poster that either solution worked.
  • Discussion remains open with actionable CSS changes suggested; no final resolution yet.
Summarized with AI on February 11. AI used: gpt-5.
1

Trying to get rid of the white space so only the image shows.

2

@ryl4n ,

Share the store URL ? So that I will find the solution.

3

Hi @ryl4n

Can you give me your site url? I will check and give you a solution, thanks. If you have a password, please attach it

4

Hi @ryl4n ,

Can you provide your store url

5

http://www.artistbricks.com

6

http://www.artistbricks.com

7

Hi @ryl4n

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file

.gradient{

background-size: cover !important;

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

8

@ryl4n

Please add the following CSS code to your Assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.gradient {
    background-image: url(https://cdn.shopify.com/s/files/1/0655/6123/1575/t/1/assets/password-page-background_jpg.png?v=1660286459);
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
}
}

Thanks!