Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi, @ecommerceguy1
Can you please share the store URL so that I can assist you?
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.
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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.
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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
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!
That is great and has fixed the issue. Is there away I can replicate this action for mobile view?
Thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024