Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to reduce unecessary spaces on collection page. - Streamline theme

Solved

How to reduce unecessary spaces on collection page. - Streamline theme

myleonemilli
Shopify Partner
6 1 2

Hello team, could anyone please instruct me how to edit the code to reduce the unnecessary spaces I currently have on streamline theme? It makes the website looks very unprofessional and I don't know anything about code. For example, the space between the collection Sort drop down menu and the collection title and the main menu bar is huge, looks very weird.  Also, I'd like to reduce the margin on the left and right and makes the product image a bit bigger. Any help pointing in the right direction would be appreciated .

 

https://ibb.co/z69drnn
https://ibb.co/mC7NKNk

Accepted Solutions (2)
dmwwebartisan
Shopify Partner
12323 2552 3732

This is an accepted solution.

@myleonemilli 

Please add following css code your assets/theme.css bottom of the file.

@media only screen and (max-width: 768px){
.template-collection .page-width {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
}

.collection-filter__wrapper+.collection-dropdowns {
    margin-top: 0px !important;
}

.template-collection .transition-body .section-header {
    margin-bottom: 20px !important;
}
}

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

View solution in original post

myleonemilli
Shopify Partner
6 1 2

This is an accepted solution.

tHANK YOU SO MUCH

View solution in original post

Replies 6 (6)

dmwwebartisan
Shopify Partner
12323 2552 3732

@myleonemilli 

Please share store URL!

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
myleonemilli
Shopify Partner
6 1 2

Thank for responding. its Ambassadressnyc.com 

dmwwebartisan
Shopify Partner
12323 2552 3732

@myleonemilli 

Please add following css code your assets/theme.css bottom of the file.

 

@media only screen and (min-width: 769px){
.template-collection .page-width {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.collection-filter__wrapper+.collection-dropdowns {
    margin-top: 0px !important;
}

.template-collection .transition-body .section-header {
    margin-bottom: 30px !important;
}
}

 

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
myleonemilli
Shopify Partner
6 1 2

THANK YOU SO MUCH! It works flawlessly. however, it doesnt reflect on mobile 😞 Is there anyway to do this?

dmwwebartisan
Shopify Partner
12323 2552 3732

This is an accepted solution.

@myleonemilli 

Please add following css code your assets/theme.css bottom of the file.

@media only screen and (max-width: 768px){
.template-collection .page-width {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
}

.collection-filter__wrapper+.collection-dropdowns {
    margin-top: 0px !important;
}

.template-collection .transition-body .section-header {
    margin-bottom: 20px !important;
}
}

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
myleonemilli
Shopify Partner
6 1 2

This is an accepted solution.

tHANK YOU SO MUCH