Re: How to make page full screen on desktop

Solved

How to make page full screen on desktop

Rowan774
New Member
5 0 0

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

 

 

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1786 3108

This is an 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}}

PageFlyVictor_0-1678950531645.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

View solution in original post

Replies 7 (7)

GemPages
Shopify Partner
5625 1262 1249

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1786 3108

This is an 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}}

PageFlyVictor_0-1678950531645.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Rowan774
New Member
5 0 0

Thank you so much!

Rowan774
New Member
5 0 0

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

PageFly-Victor
Shopify Partner
7865 1786 3108

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
Visitor
2 0 0

thanks, Worked perfectly!

WagAndPurrs
New Member
6 0 0

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