My header and footer don't cover the whole screen on phone. (Dawn theme)

Store Design
,
1

I’ve been looking for a fix for this but can’t seem to find it. On phone view My heading and footer only cover half the page, I’m looking for a fix to scale my site down on phone without it affecting anything on the desktop view. Or filling the header and footer out to fill the screen. Screen shot is attached for reference

https://eqm2r9kxdtiv3f5s-67056468257.shopifypreview.com and this is a link to my store

keyaholic_0-1667828774556.png
keyaholic_0-1667828774556.png428×911 284 KB

2

Hi @keyaholic

This is PageFly - Advanced Page Builder.

You can try with this code:

Follow this:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: paste below code in bottom of file → save.

@media screen and (max-width: 767px){

#MainContent {

margin: 0 !important;

}

}

Hope that my solution works for you.

Best regards,

PageFly

3

hi @keyaholic

Try to add this code to the bottom of Theme Editor > assets > base.css file

body {
    grid-template-columns: auto !important;
}

Try it and let me know

4

Both worked fine, Thank you for the help