Remove excess padding around collection list

[Dashcamsforcars]

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?

 

thanks 

[EBOOST]

Hi @Dashcamsforcars ,

May I suggest to update code these steps:

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

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;
  }
}

[Dashcamsforcars]

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 

 

[EBOOST]

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

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

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

[Dashcamsforcars]

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

 

[EBOOST]

Hi,

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

[Dashcamsforcars]

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]

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;

  }
}

[Dashcamsforcars]

How would I do that?

[EBOOST]

Hi,

You only need follow suggestion above to apply it.