Dawn Theme Product Slider White Space on Sides

deadmeow5 · ‎06-26-2023

Hi Guys

I need some help with my store.
Theme: Dawn v10
URL: https://masaro-clothing.myshopify.com/

Pass: ahnaip

There's this white space on right side of the screen of the slider I have edited.

On mobile the same issue occurs but instead of white space I see the next and previous product.

If anybody can help me with the right direction. I'd be really grateful.

Thank you

osamafarooqi71 · ‎06-26-2023

Hello @deadmeow5 this could be done by making some changes in your theme files.

Simply go to Online Store > Themes > Edit Code. Then find theme.liquid and then find <head> and past the following code below this, it will fix the white space for desktop. Please see the image below. And It will also remove the white space for the mobile on the left side. And also make this product full width on mobile, please see the image below.

<style>
@media screen and (min-width: 990px)
.grid--3-col-desktop .grid__item {
    width: calc(34.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.72% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
}
@media screen and (max-width: 749px)
.grid--peek.slider .grid__item:first-of-type {
     margin-left: 0px !important; 
}
@media screen and (max-width: 749px)
.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item, .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing)) !important;
}
</style>

this solution includes the coding part. So, hiring an expert is recommended.

Regards,

Osama Farooqi

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee ☕
- Was your question answered? Mark this as Accepted Solution

deadmeow5 · ‎06-26-2023

Hi @osamafarooqi71 ! Thank you so much for the code. It worked like a charm for desktop. And to some extent for mobile as well.

But in mobile when we swipe to the next product there is some space on the left side through which the previous product is visible.

Antonynex · ‎03-03-2025

Does the code work for a landings page with the same problem to ?

Dawn Theme Product Slider White Space on Sides

Dawn Theme Product Slider White Space on Sides

Community Blog Articles