Solved

How can I remove padding and margins from the collection list on the home page?

jordontricks
Excursionist
16 0 8

I want to remove padding and margins but only on the collection list on my home page. I can do it pretty easily on inspect element. But I've been looking in assets for around 2 hours and I can't find where to edit the CSS. I'm using the Brooklyn theme. https://www.youtube.com/watch?v=KGhRPtNJ3ZU

 

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1423

This is an accepted solution.

hello @jordontricks 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
#shopify-section-16266671911705cb0b .wrapper {
    padding: 0  !important;
}
#shopify-section-16266671911705cb0b {
    margin-top: 0  !important;
}
}

 

 

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12289 2547 3698

@jordontricks 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kinjaldavra
Shopify Partner
2302 570 1423

hello @jordontricks 


Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

jordontricks
Excursionist
16 0 8

Hi!

provada-jewelry.myshopify.com

the password is "staysk"

Kinjaldavra
Shopify Partner
2302 570 1423

hello @jordontricks 

please share screenshot which section do you want to remove space

jordontricks
Excursionist
16 0 8

This top margin and padding on the home page

Provada-Jewelry-Customize-Brooklyn-Shopify.png

Kinjaldavra
Shopify Partner
2302 570 1423

hello @jordontricks 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-16266671911705cb0b{
	    margin-top: 20px  !important;
}
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
    height: auto;
}

 

jordontricks
Excursionist
16 0 8

that made my mobile view look like this:

Provada-Jewelry-Customize-Brooklyn-Shopify (1).png

I mainly want my mobile view to look like this:

https://www.youtube.com/watch?v=KGhRPtNJ3ZU

Kinjaldavra
Shopify Partner
2302 570 1423

This is an accepted solution.

hello @jordontricks 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
#shopify-section-16266671911705cb0b .wrapper {
    padding: 0  !important;
}
#shopify-section-16266671911705cb0b {
    margin-top: 0  !important;
}
}

 

 

dmwwebartisan
Shopify Partner
12289 2547 3698

@jordontricks 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
div#shopify-section-16266671911705cb0b .wrapper {
    padding: 0px !important;
}
div#shopify-section-16266671911705cb0b {
    margin-top: 0px !important;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jordontricks
Excursionist
16 0 8

Hi!

provada-jewelry.myshopify.com

the password is "staysk"