ich verwende bei den responsive Anpassungen „resize der Elemente“ da sonst das Imagebild auf Smartphones abgeschnitten wird.
Jetzt habe ich unter dem Bild ein HTML Element mit einem div das allerdings auch verkleinert wird auf Handy, somit ist der Text darin nicht mehr lesbar.
Ich habe versicht via media queries einzugreifen (font-size:einfach größer;) , was aber leider nicht hilft.
So wie ich das sehe habe ich zwei Möglichkeiten:
Masonry-Effekt, dann ist das Image-Bild responsive - jedoch wird das div mit dem Textblock auch verkleinert so dass der Text unlesbar ist.
Resize der Elemente, dann passt der Textblock am Smartphone, jedoch wird das Image-Bild abgeschnitten.
Gibt es da eine Möglichkeit bzw. einen Trick wie ich beides haben kann?
Bei font-size kann es sein das deine Änderungen eine niedrigere Priorität haben als die von Shopware (specificity). Mit !important kannst du ausprobieren ob deine Änderungen greifen.
Ausserdem kannst du in der Einkaufswelt deinen Elementen Klassen geben, diese kannst du nutzen um CSS auf ein bestimmtes Element zu packen.
Das mit den Klassen geht glaub ich erst ab SW 5.2. Ich verwende noch 5.1.1.
Dort habe ich allerdings das Plugin „HTML/CSS/JS Widget“ installiert, was mir ermöglicht html und css getrennt einzufügen. !important habe ich schon probiert- hilft leider nicht.
KAnn es sein dass ich für jedes Device eine eigene Einkaufswelt basteln muss? Derzeit habe ich eine und bei den einstellungen alle Geräte bzw. Auflösungen ausgewählt.
Sofern das Element im Mobilen auf voller Breite ist sollte das keine Verbesserung bringen. Die Einkaufswelt sollt ihre Elemente selbstständig positionieren.
Das div mit deinem Text sollte standardmäßig die geringere font-size erhalten und in größeren Breakpoints (ab @tabletViewportWidth vermute ich) dann die größere. Das CSS neu generieren lassen nicht vergessen!