Dawn 2.0 - How to remove the numbers from featured collections?

[GG9]

How do I remove the numbers from featured collections when swiping on mobile or smaller devices? 

My store URL: https://hyz8484lh6daf9h3-57645498523.shopifypreview.com

[made4Uo · Accepted solution]

Hi @GG9, 

1. Go to Admin page > Online store > Themes > Actions > Edit code
2. Open the base.css under the Asset folder.
3. Add the code below and click SAVE

@media only screen and (max-width: 750px) {
.collection .slider-buttons {
display: none !important
}
}

[made4Uo · Accepted solution]

Hi @GG9, 

1. Go to Admin page > Online store > Themes > Actions > Edit code
2. Open the base.css under the Asset folder.
3. Add the code below and click SAVE

@media only screen and (max-width: 750px) {
.collection .slider-buttons {
display: none !important
}
}

[GG9]

@made4Uo Thank you! Is there an easy to way add an arrow to the image itself that looks like that too? 

[made4Uo]

Hi @GG9, 

If you want to show the buttons on the side, please delete the previous code provided and replace with the code below.

Note: For the slider to work, you must assign more than 4 products

.collection .slider-button.slider-button--prev {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-150%);
   z-index: 20
}

.collection .slider-counter.caption {
    visibility: hidden; !important
}

.collection .slider-button.slider-button--next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-150%);
   z-index: 20
}

[GG9]

@made4Uo Thanks a lot! Do you know how to properly set the position? On desktop devices, the arrows are on the very outside and on mobile devices the arrows are in the mid of two images. I already added the code on my website if you could check that: https://hyz8484lh6daf9h3-57645498523.shopifypreview.com/

[made4Uo · Accepted solution]

Hi @GG9 

Please add the code below.

.grid__item.slider__slide:first-child {
    margin: 0 !important
}

.collection slider-component {
margin: auto 5vw !important
}

Since buttons will be on top of the image, I would recommend adding background to show contrast. Add the code below if you agree. 

.collection .slider-button {
  background: rgba(255, 255, 255, 0.7) !important;
}

Also, please be aware that the code for ".collection .slider-button.slider-button--prev" should be left: 0. I am seeing left: -50;

[GG9]

@made4Uo Thanks, works more than great! Is there some way to add the exact same thing to multicolumns sections and product pages?

[DevgeeksCoUK]

It's working great, but it's not work in collection list. can you explain where i am wrong ?

[Nyud]

This didn't work for me. Are you able to help? Thanks!

My store is www.nyudswim.com