Cannot see "Add to cart" text in collection, mobile only

Technical Q&A
1

Hello!

For some reason on mobile, the “Add to cart” Text just disappeared out of nowhere. The button is still there, the hover, border, everything. On desktop it also works perfectly. I’ve tried everything in base.css, but it doesnt even recognize the code (also on mobile only). Please help me with this.

Also, the add to cart text appears when I change from Standard style to card, so for the time being it is set to card.
Thank you all in advance.

crescent.hu

2

Hi @crescenthu , can you link to the exact page where this issue is happening?

3

it is crescent.hu

on the main page, if you scroll down a bit.
Right now it looks fine, but only because I’ve changed the style to cards, even though I do not want that. But at least the text shows up that way.

image
image1647×787 284 KB

4

@crescenthu , where can I see the problematic style?
I can try to take a look and see if we can make it look as you need to

5

Thank you. I’ve changed it back to standard style so you can see it yourself. It only shows if you are viewing in mobile view.

6

The issue is that in custom.css you have this code

@media (max-width: 749px){
    product-form .product-form__submit span, product-form .quick-add__submit span, .product-form__submit span, .quick-add__submit span, .button[name="add"] span {
        color: #000 !important;
    }
}

Which is making the text in those buttons be black, and as the background is also black then it looks as if the text is missing.

To fix it you can add the following code at the bottom of custom.css

@media (max-width: 749px){
   slider-component .button[name="add"] span {
      color: white !important;
   }
}

Double check it doesn’t break things elsewhere in your page but what this code is doing is changing the text color of the add button to be white when it is inside a slider component (like in the section you shared).

7

Thank you so much. It’s good now there. Hovewer, on “All products”, it is still there, as you can see here

image
image513×546 76.4 KB

8

@crescenthu , update the code to be as follows

@media (max-width: 749px){
      slider-component .button[name="add"] span,
      product-form .button[name="add"] span {
            color: white !important;
      }
}

This should fix it in both places

9

you’re a legend man thank you