Abstände in Produktbeschreibungen

[FirstUser2023]

Hallo Freunde,

vielleicht hatte jemand schonmal das Problem und kann mir helfen. Ich möchte in meiner Produktbeschreibung verschiedene Absätze formulieren und diese mit einer durchgezogenen Linie trennen.

Ich bin also auf Produkte und Produktbeschreibung, und habe in dem HTML das <hr> zwischen den Absätzen eingefügt die ich trennen möchte.

Leider sah es dann unschön aus, weil die Absätze zwar getrennt sind aber einen Abstand, also eine margin zu der Trennlinie hatten.

Dann habe ich in den HTML Code noch <style> hr { margin: 0; } eingefügt. Jetzt sind die Abstände weg, aber meine Produktseite scheint nicht mehr "fixiert" zu sein. Das heißt, sie verschiebt sich wenn man per mobile zB rauszoomt. Ich lasse mal einen Link da, dann könnt ihr das sehen.

Wie kann ich das lösen??? Danke vielmals!


Link: https://valeriebeaute.com/collections/beauty-devices/products/valeries-ems-gua-sha-lighty-therapy

[Gabe]

Hey @FirstUser2023 

Danke für den Sachverhalt und deine Produktbeschreibung sieht m. M. nach nicht schlecht aus! Was genau möchtest du da ändern? Hast du einen Mockup vielleicht der das zeigt was du dir vorstellst?

Hier ein paar Ressourcen zum Thema aufgelistet die dir hoffentlich weiterhelfen können:

Um das Problem mit dem Layout deiner Shopify-Produktseite auf mobilen Geräten zu lösen, kannst du verschiedene Ansätze verfolgen. Hier sind einige Vorschläge basierend auf Informationen aus verschiedenen Quellen:

1. Responsive Design: Wähle ein Shopify-Theme, das sich automatisch an verschiedene Bildschirmgrößen anpasst. Dies stellt sicher, dass deine Webseite auf verschiedenen Geräten, von Smartphones bis zu Desktop-Computern, gut aussieht und funktioniert​​.

2. Anpassung spezifischer Elemente: Wenn du spezielle Anpassungen vornehmen möchtest, wie das Hinzufügen eines mobilen Logos oder das Ändern der Darstellung bestimmter Elemente, können Media Queries hilfreich sein. Media Queries ermöglichen es dir, CSS-Regeln für bestimmte Bildschirmgrößen zu definieren, um das Layout und die Darstellung entsprechend anzupassen​​.

3. Bearbeiten des Theme-Codes: Um Text auf deiner Shopify-Seite zu formatieren, kannst du den Code deines Themes bearbeiten. Gehe dazu in deinem Shopify-Admin-Bereich zu "Online Store > Themes" und wähle "Edit code" im Dropdown-Menü "Actions". Im Code-Editor kannst du dann HTML-Tags wie <p>, <b> und <u> verwenden, um Text zu formatieren​​.

4. Problembehebung durch Anpassung des CSS: In einem spezifischen Fall wurde das Problem mit dem Layout durch Anpassung des CSS-Codes in der Datei theme.scss.liquid behoben. Hierbei ging es um die Anpassung der Breite und des Margins für bestimmte Elemente, wenn die Bildschirmgröße über 750px liegt​​.

Weitere Tipps:

Es könnte der hinzugefügte <style>-Tag für das <hr>-Element zu unerwünschten Auswirkungen auf das Layout deiner Seite führt, insbesondere auf mobilen Geräten. Ein Ansatz zur Behebung dieses Problems könnte darin bestehen, spezifische CSS-Media-Queries zu verwenden, um das Verhalten deiner Website auf verschiedenen Bildschirmgrößen besser zu steuern.

Eine Möglichkeit, dies zu erreichen, ist die Verwendung eines Media-Queries, der sich nur auf Mobilgeräte bezieht. Du könntest beispielsweise den folgenden CSS-Code verwenden, der nur auf Bildschirme mit einer maximalen Breite von 767px angewendet wird:

@media screen and (max-width: 767px){
    #shopify-section-1580280662236 ul.logo-bar{  
        display: flex;
        justify-content: center;  
    }   
}

Dieser Code stellt sicher, dass die Änderungen nur auf mobilen Geräten angewendet werden und das Layout auf Desktop-Geräten unverändert bleibt. Du kannst die max-width-Eigenschaft entsprechend anpassen, um sie an die spezifischen Bedürfnisse deiner Website anzupassen.

Es ist auch wichtig zu beachten, dass das direkte Bearbeiten von HTML und CSS in Shopify eine gewisse Vorsicht erfordert, insbesondere wenn du nicht vertraut mit diesen Technologien bist. Fehler in der Codierung können zu Problemen auf deiner gesamten Website führen. Wenn du dir unsicher bist, empfiehlt es sich, die Hilfe eines professionellen Entwicklers oder eines Shopify-Experten in Anspruch zu nehmen.

Darüber hinaus ist es ratsam, Änderungen zunächst in einer Testumgebung vorzunehmen, bevor sie auf deiner Live-Website implementiert werden. So kannst du sicherstellen, dass alles wie gewünscht funktioniert, ohne das Risiko einzugehen, deine Live-Website zu beeinträchtigen.

Quellen:

• Shopify Community: Diskussion zu Margin- und Padding-Problemen in der mobilen Ansicht
• WebsiteBuilderInsider: Anleitung zur Bearbeitung des mobilen Ansichts auf Shopify
• PipiAds: Anleitung zur Anpassung von Seitenrändern auf Shopify