Remove padding from Collection List on Motion theme

[ecommerceguy1]

Hi there,

I'd like to remove padding from the 'Collection List' section on the homepage for the theme motion. I'd really like this to be seamless with blocks above and below and to stretch to each side. Please see image for reference. 

Any help would be appreciated. 

Thanks

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (min-width: 590px) {
  #shopify-section-template--16018759680087__featured_collections_E6ifmT.index-section {
       margin: 50px 0 !important;
  }
  #shopify-section-template--16018759680087__featured_collections_E6ifmT .page-width {
       max-width: 100% !important;
       padding: unset !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Huptech-Web · Accepted solution]

Hello! @ecommerceguy1 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (min-width: 590px) {
  body #shopify-section-template--16018759680087__featured_collections_E6ifmT{
       max-width: 100% !important;
       padding: unset !important;
       margin:0px !important;
   }
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[AnneLuo]

Hi, @ecommerceguy1 

Can you please share the store URL so that I can assist you?

[niraj_patel]

Hello @ecommerceguy1 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[ecommerceguy1]

https://yjudk64o3hgl2wb5-15756711.shopifypreview.com

is it currently in draft. 

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (min-width: 590px) {
  #shopify-section-template--16018759680087__featured_collections_E6ifmT.index-section {
       margin: 50px 0 !important;
  }
  #shopify-section-template--16018759680087__featured_collections_E6ifmT .page-width {
       max-width: 100% !important;
       padding: unset !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[ecommerceguy1]

Hi Niraj,

Thank you for this. It has fixed the issue with the width, however, I am still showing padding above and below. I am also using the Collection List block another 2 times further down the page. Is there a way that these will follow the same customisations?

Thanks again.

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (min-width: 590px) {
    #shopify-section-template--16018759680087__featured_collections_E6ifmT.index-section {
      margin: 0 !important;
    }
    #shopify-section-template--16018759680087__featured_collections_M3RKJz.index-section {
        margin: 0 !important;
    }
    /*for another two secctions*/
     #shopify-section-template--16018759680087__featured_collections_M3RKJz .page-width {
         max-width: 100% !important;
         padding: 0 !important;
     }
    #shopify-section-template--16018759680087__featured_collections_9Fh98b.index-section {
         margin: 0 !important;
     }
     #shopify-section-template--16018759680087__featured_collections_9Fh98b .page-width {
       max-width: 100% !important;
        padding: 0 !important;
     }

  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Huptech-Web · Accepted solution]

Hello! @ecommerceguy1 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (min-width: 590px) {
  body #shopify-section-template--16018759680087__featured_collections_E6ifmT{
       max-width: 100% !important;
       padding: unset !important;
       margin:0px !important;
   }
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[Made4uo-Ribe]

Hi @ecommerceguy1 

To remove top and bottom space. You can add or find this code wherever you add this. 

@media only screen and (min-width: 590px) {
    #shopify-section-template--16018759680087__featured_collections_E6ifmT.index-section {
        margin: 0 !important;
    }
}

And Save. 

Result:

This is the code before edits. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ecommerceguy1]

That is great and has fixed the issue. Is there away I can replicate this action for mobile view?

Thanks