All things Shopify and commerce
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
Solved! Go to the solution
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}}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
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
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}}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
Thank you so much!
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?
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
thanks, Worked perfectly!
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%;
}
}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024