How to make page full screen on desktop

Shopify Discussion
1

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

Rowan774_0-1678946761812.png
Rowan774_0-1678946761812.png2591Ă—1232 309 KB

2

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

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

3

Hi [email removed]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}}

PageFlyVictor_0-1678950531645.png
PageFlyVictor_0-1678950531645.png3000Ă—1196 440 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

4

Thank you so much!

5

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?

mysite2.JPG
mysite2.JPG2559Ă—1170 168 KB

6

Hi [email removed]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

7

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%;
}
}

8

thanks, Worked perfectly!