Center collection list names and remove arrows

Store Design
,

Topic summary

A user seeks help centering collection list names and removing navigation arrows on their Shopify store (taneau.com).

Solutions Provided:

Multiple contributors offered CSS code to add to the base.css file:

  • Centering text: .card-wrapper .card__content { text-align: center; }
  • Removing arrows: .card__information .card__heading .full-unstyled-link .icon-wrap { display: none; } or .collection-list-wrapper span.icon-wrap { display: none; }

Current Issue:

The CSS fixes work on desktop but fail on mobile devices. The user confirmed desktop functionality but continues experiencing problems with mobile responsiveness.

Latest Recommendation:

One contributor suggested adding !important flags to CSS rules and placing code in component-card.css instead of base.css to resolve mobile display issues.

Status: Ongoing troubleshooting for mobile version compatibility.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello, can someone help me please? I need to center the collection list names and remove the arrows.

taneau.com (ride theme)

IMG_8364.jpeg
IMG_8364.jpeg1170×2532 143 KB

1 Like
2

Hello @atm19
I can help you. Please share your store URL first.

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.card-wrapper .card__content {
text-align: center;
}

ZestardTech_0-1709715490635.png
ZestardTech_0-1709715490635.png1751×600 84.4 KB

ZestardTech_1-1709715503933.png
ZestardTech_1-1709715503933.png547×356 28.3 KB

4

www.taneau.com it is on the homepage

5

Thanks! How can i remove the arrows?

IMG_8365.jpeg
IMG_8365.jpeg563×1219 29.1 KB

1 Like
6

Hi there @atm19

As per the guide and code provide by @ZestardTech you will be able to center the collection name in the center paste the below code to hide the arrow

.card__information .card__heading .full-unstyled-link .icon-wrap {
    display: none;
}

Let me know if you face any issue

7

Hi @atm19 ,

Try adding below css to base.css file.

.collection-list-wrapper span.icon-wrap {
    display: none;
}

Thank you

8

Thanks it works! But only on detskop version. Not on the mobile. What should I add ? The center and arrow remove for mobile version.

9

Thanks it works. But only on detskop version how can I have it also on the mobile version ?

10

Try adding important on each css

paste this code

.card__information {
    text-align: center !important;
}
.card__information .card__heading .full-unstyled-link .icon-wrap {
    display: none !important;
}

.card .icon-wrap {
    display: none !important;
}

try this this must fix it. let me know if it fix

11

Hi @atm19

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.collection-list-wrapper span.icon-wrap {
    display: none;
}
12

bottom base.css or where? Sorry I don’t understand

13

Replace the previous codes with this one in base.css, remove the previously provided css I have included all of them.

Yes very bottom

14

it didnt work for the mobile version:(

15

what should i try other?

16

Place the same code in component-card.css to very bottom