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

[awirtz]

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

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

 

[Rahul_dhiman]

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 .

[Vinsinfo · 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,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[awirtz]

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