Kollektion - Titel entfernen auf mobiler Shop Version

[VSWildTom]

Hallo Community, leider erneut ich mit einem Problem 😅

und zwar möchten wir gerne die Titel der Kollektionen "entfernen" bzw. zumindest ausblenden.

Mit diesem Tipp von @oscprofessional konnten wir bereits auf der Desktop Version das gewünschte Ergebnis erzielen:

Unser Store Beispiel (wie es sein soll):

Jedoch bleiben die Titel der Kollektionen auf der mobilen Version bestehen 😫

siehe Screenshots:

Wir haben aktuell nur den folgenden Code unter dem base liquid eingefügt. Sonst keine Änderungen hierfür vorgenommen.

.card-wrapper.animate-arrow .card__heading {
	display: none;
}

Hat jemand eine Lösung? Vielen Dank!
Thomas
VS WILD

[VIVID_24 · Accepted solution]

Hallo Thomas @VSWildTom ist wahrscheinlich irgendwie gekoppelt mit dem Bild. Aber ich habe mal ein Screenshot gemacht. Evtl. ist das eine Option für dich - die Beschreibung einfach kleiner machen ?

PS: Nachtrag man kann die Schriftgröße einfach auf 0rem stellen, dann ist die Schrift weg und das Bild ist weiterhin verlinkt. Habe es gerade probiert und geht

[Ben310 · Accepted solution]

Probiere es mal mit folgenden CSS um den Hyperlink innerhalb des Titels zu verschieben, sodass nur der Text des Titels ausgeblendet wird, aber nicht der Link selbst:

.card-wrapper.animate-arrow .card__heading {
    visibility: hidden;
}

@media (max-width: 767px) {
    .card__heading {
        visibility: hidden;
    }
}

visibility: hidden; um den Text unsichtbar zu machen, wobei Links sollten erhalten bleiben.

Oder den Link anders positionieren oder Text des Links transparent machen:

.card-wrapper.animate-arrow .card__heading a {
    color: transparent;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent;
    }
}

Mit Regel  !important :

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

[Ben310]

@VSWildTom 

Schwer zu sagen wenn du keinen Link zu einem Beispiel hier postest, oder wenigstens das Theme angibst. Das verlangsamt alles eine angepasste Lösung.

Das habe ich aber jetzt in meinem Dawn getestet und ihr, oder dein obiger Code vom Partner, verwendet scheinbar keine Media Queries die notwendig wären um das auch auf Mobile zu machen. Probier mal folgendes im CSS Editor deines Themes:

/* Standard Stil für Desktop */
.card-wrapper.animate-arrow .card__heading {
    display: none;
}

/* Stil für mobile Geräte */
@media (max-width: 767px) {
    .card__heading {
        display: none !important;
    }
}

[VSWildTom]

Hi Ben und danke für die Antwort!

Beispielscreenshots habe ich doch beigefügt; Kategoriebild ohne Titel - siehe Desktop Version:

Die Infos zum Theme habe ich tatsächlich vergessen anzugeben. die Shop URL lautet https://vswild.store und wir nutzen das Spotlight Theme V. 15.0.1

Mit deinem vorgeschlagenen CSS ist zwar der Titel auf beiden devices nicht mehr zu sehen, jedoch ist der hyperlink zu der jeweiligen Kollektion dann weg und es bleibt nur noch die Grafik als solche über 😕

[VIVID_24]

Hey @VSWildTom da musst Du folgendes eingeben:

.card--standard>.card__content .card__information {

    display: none;

}

Gruß Markus

PS: Bin mir aber nicht sicher ob dann auch die Verlinkung weg ist

[VSWildTom]

Hi Markus und danke auch dir - leider hast du richtig angenommen und die Verlinkung ist dann auch hinüber

LG Thomas

[VIVID_24 · Accepted solution]

Hallo Thomas @VSWildTom ist wahrscheinlich irgendwie gekoppelt mit dem Bild. Aber ich habe mal ein Screenshot gemacht. Evtl. ist das eine Option für dich - die Beschreibung einfach kleiner machen ?

PS: Nachtrag man kann die Schriftgröße einfach auf 0rem stellen, dann ist die Schrift weg und das Bild ist weiterhin verlinkt. Habe es gerade probiert und geht

[VSWildTom]

Hi Markus,

eine Laienfrage sorry: wie genau hast du spezifisch nur die Kategorie Titel/Beschreibung kleiner gemacht? Wenn ich im Theme die Typografie ändere, wirkt sich das auf alle Texte im Theme aus 🤔

Aber die Option klingt toll!

[Ben310 · Accepted solution]

Probiere es mal mit folgenden CSS um den Hyperlink innerhalb des Titels zu verschieben, sodass nur der Text des Titels ausgeblendet wird, aber nicht der Link selbst:

.card-wrapper.animate-arrow .card__heading {
    visibility: hidden;
}

@media (max-width: 767px) {
    .card__heading {
        visibility: hidden;
    }
}

visibility: hidden; um den Text unsichtbar zu machen, wobei Links sollten erhalten bleiben.

Oder den Link anders positionieren oder Text des Links transparent machen:

.card-wrapper.animate-arrow .card__heading a {
    color: transparent;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent;
    }
}

Mit Regel  !important :

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

[VSWildTom · Accepted solution]

Edit://

Danke dir Ben und danke Markus @VIVID_24 - mit einer Kombination aus beiden eurer Vorschläge ist das Ergebnis nun nahezu perfekt!

Diesen Code als CSS von Ben:

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

plus die Idee von Markus mit der Schriftgröße hat es getan!

Danke euch vielmals

LG Thomas

[VIVID_24]

Hallo Tomas @VSWildTom passt es dir so wie es jetzt ist ? Oder kann man noch helfen ?

Gruß Markus

[VSWildTom]

Hi Markus, sorry die Benachrichtigung zu deiner Antwortfrage ging unter.

Ist vollkommen in Ordnung so! Sieht gut aus, danke dir nochmal für die Hilfe 

LG Thomas