Remove excess padding around collection list

Dashcamsforcars
Tourist
5 0 1

Hey. I’d like to remove this white area within my collection list. I’ve tried multiple codes but no luck. The collections list has had some custom code to remove the borders and collection name already and wondered if this would affect it?

 

see picture below of area I’d like removed. The blue outline is the collection list template.

 

my website is www.dashcamerasforcars.co.uk. There’s also lots of movement when scrolling the collection list. Can this be changed?

 

IMG_3094.jpeg

 

thanks 

Replies 9 (9)

EBOOST
Shopify Partner
973 263 303

Hi @Dashcamsforcars ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
  #shopify-section-template--19429920407820__rich_text_6FnFFa .rich-text__blocks > h2 + .rte{
    margin-top: 0;
  }
  #shopify-section-template--19429920407820__collection_list_NkTzMF #Slider-template--19429920407820__collection_list_NkTzMF{
    margin-bottom: 0;
  }
  #shopify-section-template--19429920407820__collection_list_NkTzMF .slider.slider--tablet .slider__slide {
    padding-bottom: 0;
  }
  #shopify-section-template--19429920407820__collection_list_NkTzMF .card--card .card__inner .card__media {
    margin-bottom: 0;
  }
}

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

Dashcamsforcars
Tourist
5 0 1

Hey. Thank you for your reply. I’ve managed to fix this. 

I was wondering on the desktop version how can I make the 10 collection lists appear in one row instead of 2 rows of 5 and be scrollable.  I want it to replicate the same function as the mobile version 

IMG_3100.jpeg

EBOOST
Shopify Partner
973 263 303

Hi @Dashcamsforcars ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Sections/collection-list.liquid
3. Add code likes the screenshot below

EBOOST_0-1716979073792.png

1. Add "slider-component-desktop" class to "slider-component" tag

2. Add "slider--desktop" class to ul tag below "slider-component" tag

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Dashcamsforcars
Tourist
5 0 1

Hey. I’m unable to see this code under that section. 

IMG_3101.png

 

EBOOST
Shopify Partner
973 263 303

Hi,

Could you share code? I will help to add it.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Dashcamsforcars
Tourist
5 0 1
I found the code. Entered it as you described and it bunched up all my
collections into one big huddle down the left side of the desktop homepage.
EBOOST
Shopify Partner
973 263 303

Hi,

You need add some CSS & class like the screenshot as well

@media screen and (min-width: 990px) {
  #shopify-section-template--19429920407820__collection_list_NkTzMF .slider--desktop.grid--5-col-desktop .grid__item {
    width: 20%;
    max-width: 20%;
  }
  #shopify-section-template--19429920407820__collection_list_NkTzMF .slider--desktop .slider__slide:first-child {
    margin-left: 0;
    scroll-margin-left: 0;

  }
}

EBOOST_0-1716986937185.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Dashcamsforcars
Tourist
5 0 1

How would I do that?

EBOOST
Shopify Partner
973 263 303

Hi,

You only need follow suggestion above to apply it.

EBOOST_0-1717277225037.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤