Re: Remove padding from Collection List on Motion theme

Solved

Remove padding from Collection List on Motion theme

ecommerceguy1
Excursionist
18 0 5

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. Screenshot 2024-09-02 101002.png

 

Any help would be appreciated. 

 

Thanks

Accepted Solutions (3)
niraj_patel
Shopify Partner
2378 514 512

This is an 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>

niraj_patel_0-1725269155416.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Huptech-Web
Shopify Partner
941 188 197

This is an 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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

niraj_patel
Shopify Partner
2378 514 512

This is an 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>

niraj_patel_0-1725274003308.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 10 (10)

AnneLuo
Shopify Partner
967 181 206

Hi, @ecommerceguy1 

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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

niraj_patel
Shopify Partner
2378 514 512

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.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Sangeetanahar
Explorer
541 36 69

hello @ecommerceguy1 

Can you please send me the Website URL.

Thanks

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 -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

ecommerceguy1
Excursionist
18 0 5
niraj_patel
Shopify Partner
2378 514 512

This is an 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>

niraj_patel_0-1725269155416.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
ecommerceguy1
Excursionist
18 0 5

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
Shopify Partner
2378 514 512

This is an 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>

niraj_patel_0-1725274003308.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Huptech-Web
Shopify Partner
941 188 197

This is an 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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Made4uo-Ribe
Shopify Partner
8403 2009 2466

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:

Made4uoRibe_0-1725273117163.png

This is the code before edits. 

Made4uoRibe_1-1725273159348.png

 

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ecommerceguy1
Excursionist
18 0 5

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

 

Thanks