How can I eliminate duplicate header text on mobile product cards?

Store Design
,
1

Hello,

How do i remove double header text from my product cards when it’s on phone?

Here is all the information:

website: https://9bdf24-2.myshopify.com/collections/all

password: label

Foxis98_0-1683720167320.png
Foxis98_0-1683720167320.png377×709 126 KB

2

To remove the double header text from your product cards on mobile devices, you’ll need to make some changes to the CSS code of your theme. Here’s a general approach you can follow:

  1. Identify the CSS class or selector that targets the header text in your product cards. This class or selector will vary depending on your theme.

  2. Locate the media query in your theme’s CSS file that targets mobile devices. Typically, this will have a max-width value set to a specific screen size (e.g., @media (max-width: 768px)).

  3. Within the mobile media query, find the CSS rule that controls the styling of the header text. It may include properties like font-size, line-height, or display.

  4. Add the following CSS property to the rule targeting the header text to hide it on mobile devices:

display: none;