How to make page full screen on desktop

[Rowan774]

As the title suggests, I am using the debutify theme, but I cannot seem to make my product page, or any page for that matter to stretch, and remove the white space on the left and right of the products. I would also like my header to be full screen too.  I would really appreciate how to fix this, Thanks!

my website is pets-play.com

[GemPages]

Hello @Rowan774 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before </body>

<style>
#mainContent .wrapper{
max-width:100% !important;
}
</style>

I hope the above is useful to you.
Best regards,
GemPages Support Team

[PageFly-Victor · Accepted solution]

Hi @Rowan774,

You can try this code by following these steps: 

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

Step 2: Search file theme.scss or theme.scss.liquid

Step 3: Paste the below code at bottom of the file -> Save

@media(min-width:1024px){.wrapper{max-width:100% !important}}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[Rowan774]

Thank you so much!

[Rowan774]

Hi, I have been experimenting with other themes, and I am now trying the Debut (not debutify) theme, and now, the header is full screen, but there is still a ton of white space on the left and right of all of my pages, what should I do for this site?

[PageFly-Victor]

Hi @Rowan774,

You can try this code by following these steps: 

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

@media(min-width:1024px){.page-width{max-width:100% !important}}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[Abs-Athletics]

thanks, Worked perfectly!

[WagAndPurrs]

Hi There, 

Here is the code i use for a full screen of my product grid.

Just paste this code into the thee "Custom Css" for the product grid. You can adjust as needed for playing with percentages.

Hope This helps, took a bit to figure out how easy it is lol 

@media only screen and (min-width: 600px) {
.grid {
width: 160%;
margin-left: -29%;
}
}