I have customised the homepage for the the theme Motion to remove padding from the Collection List block. I would like to do the same for the mobile view. I would like it to be seamless with the blocks above and below and to fill the full width. Please see image for reference.
The store is currently in draft, here is the URL - no problem, it is currently in draft - https://ip7ra12cffbve2a6-15756711.shopifypreview.com
Any help would be appreciated.
Cheers
Hi @ecommerceguy1 , kindly share your store URL please.
Thanks!
no problem, it is currently in draft - https://ip7ra12cffbve2a6-15756711.shopifypreview.com
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (max-width: 589px){
div#shopify-section-template--16018759680087__featured_collections_E6ifmT .grid.grid--no-gutters {
display: flex;
}
div#shopify-section-template--16018759680087__featured_collections_E6ifmT .page-width {
padding: 0 !important;
}
div#shopify-section-template--16018759680087__featured_collections_E6ifmT {
margin: 0 !important;
}
}
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
HEllo @ecommerceguy1
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.
.page-full, .page-width {
padding: 0 0px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Thanks for this. It has worked with the padding on the sides but not the top or bottom. Do I need add something else?
Replace my previous code with the below given:
Thanks for this. I have added this but it doesn’t seem to have worked. Do I combine it with the original code you sent over?
Thanks
Did you replace all of my previous codes with the below one?
Go to online store ----> themes ----> actions ----> edit code ---->assets ---->partials ----> collection-collage-grid.css
add this code at the end of the file.
.collection--square-large, .collection--tall {
height: 550px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thanks for this. I have now but it is still showing gaps above and below. Please find the link for reference - https://ip7ra12cffbve2a6-15756711.shopifypreview.com
@ecommerceguy1 , try this code by replacing old one:
As you can see the space from above and below is gone now.
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
That’s worked great, thank you very much.
Just on a side note, would you know how to arrange the collections within the Collection List to be next to side by side like on desktop view, rather than stacked?
@ecommerceguy1 , add this code below the given code before
.grid--no-gutters {
display: flex !important;
}
The new code will look like this:
Kindly mark both the above one and the now given reply as an accepted solution
that’s worked great. Thank you for your help.
@ecommerceguy1 , glad it worked, your welcome!
Hey there.
Thanks again for helping with this. I have noticed that this has removed padding from all sections of the site. The product and collection pages are looking like they have been zoomed in to. Is there away this customisation is only utilised on the homepage?
Thanks again!
