Solved

Align section to the left

collins276
Trailblazer
213 1 32

Hi everybody,

Can you help me to move Featured Products to the left in order to align with other sections.

Please visit my url: https://189ee3-2.myshopify.com/ 

Thank you,

 

Screenshot (1).png

 

 

Accepted Solution (1)
theycallmemakka
Shopify Partner
1484 337 360

This is an accepted solution.

Can you try adding this CSS.

<style>

@media screen and (min-width: 750px){
    slider-component.slider-mobile-gutter.slider-component-desktop {
        max-width: 1200px !important;        
    }
    .slider--desktop .slider__slide:first-child {
        margin-left: 0rem !important;
    }
    
    slider-component.slider-mobile-gutter.slider-component-desktop {
        max-width: var(--page-width);
        margin: 0 auto;
    }
}
</style>

theycallmemakka_0-1712163665241.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 4 (4)

theycallmemakka
Shopify Partner
1484 337 360

Hi @collins276 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media screen and (min-width: 990px){
    .slider--desktop .slider__slide:first-child {
        margin-left: 6rem;        
    }
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

collins276
Trailblazer
213 1 32

Thank you, but the are still not align. I gonna check my page width.

 

U1.png

 

 

 

 

 

 

 

theycallmemakka
Shopify Partner
1484 337 360

This is an accepted solution.

Can you try adding this CSS.

<style>

@media screen and (min-width: 750px){
    slider-component.slider-mobile-gutter.slider-component-desktop {
        max-width: 1200px !important;        
    }
    .slider--desktop .slider__slide:first-child {
        margin-left: 0rem !important;
    }
    
    slider-component.slider-mobile-gutter.slider-component-desktop {
        max-width: var(--page-width);
        margin: 0 auto;
    }
}
</style>

theycallmemakka_0-1712163665241.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

collins276
Trailblazer
213 1 32

Thank you so much. But I'd like the Third image to be align with other section (because it's carousel so the max-width is 100vw, not 1200px)

Like in this page,  https://189ee3-2.myshopify.com/collections/all#MainContent the first three images fit perfectly