Solved

Is there a way to center the collection images on the mobile view - Pipeline theme

awirtz
Explorer
54 0 11

Is there a way to center the collection images on the mobile view in the Pipeline theme

 

Link to site: https://annwirtz.com/

 

Screenshot 2024-06-03 at 9.38.14 PM.png

Accepted Solution (1)

Vinsinfo
Shopify Partner
303 112 107

This is an accepted solution.

@awirtz Please follow the below steps to center the collection images on the mobile view in the Pipeline theme. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "theme.css" file and paste below code at the bottom.

 

@media only screen and (max-width: 479px) {
    .template-index .section-list-collections.list__collections [data-grid] {
        flex-direction: column !important;
        align-items: center;
    }
    
    .template-index .section-list-collections.list__collections [data-grid]:not([data-grid-no-gutters]) [data-item]:last-child {
        margin-right: calc(var(--gutter) + 1px) !important;
    }
}

 

 

Final Results will be like,
Vinsinfo_0-1717483163019.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 3 (3)

Rahul_dhiman
Shopify Expert
107 20 36

Here is what you can do 
So this is comming from the padding part : so if we remove the left padding this is going to fix the issue .

@media only screen and (max-width: 1099px) {
  .section-no-slider-mobile [data-grid] {
    margin: 0 auto;
    padding-right: calc(var(--outer) - var(--gutter));
   
  }
}
@media only screen and (max-width: 479px) {
  .section-no-slider-mobile [data-grid] {
    margin: 0 auto;
    padding-right: 0;
   
  }
}

 So please in theme.css file find  .section-no-slider-mobile [data-grid]  ---> you will find 2 instanaces in line . Replace the code with the code I have provided and would fix the issue .

Desktop-screenshot (1).pngDesktop-screenshot.png

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

Vinsinfo
Shopify Partner
303 112 107

This is an accepted solution.

@awirtz Please follow the below steps to center the collection images on the mobile view in the Pipeline theme. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "theme.css" file and paste below code at the bottom.

 

@media only screen and (max-width: 479px) {
    .template-index .section-list-collections.list__collections [data-grid] {
        flex-direction: column !important;
        align-items: center;
    }
    
    .template-index .section-list-collections.list__collections [data-grid]:not([data-grid-no-gutters]) [data-item]:last-child {
        margin-right: calc(var(--gutter) + 1px) !important;
    }
}

 

 

Final Results will be like,
Vinsinfo_0-1717483163019.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
awirtz
Explorer
54 0 11

Thank you for the help. This code worked. I appreciate you time.