Abstand zwischen einzelnen Abschnitten verkleinern (mobile) // Palo Alto

[Nils_MOOT]

Hallo!

Ich würde gerne für mein Shop-Update (https://v9dsdy79sofj0p9e-53047066783.shopifypreview.com) die Abstände bei der mobilen Ansicht etwas anpassen. Zum Einen zwischen den Überschriften und den zugehörigen Elementen und zum Anderen zwischen den einzelnen Abschnitten. Vor allem bei dem "Bekannt aus"-Abschnitt sind die sehr groß. 

Vielen Dank für Eure Hilfe!
Nils

[Finer · Accepted solution]

@Nils_MOOT dazu müsstest du über dem Code-Editor des Themes in die css-variables.liquid gehen und den Wert bei "--gutter" den gewünschten Wert anpassen (bsp. von 60px auf 20px). 

Allerdings muss man bedenken, dass die Variable "--gutter" an unterschiedlichsten Stellen und auch in der Desktop-Ansicht verwendet wird. Daher kann sich das auch auf andere Elemente auswirken. 

Ich bin mir nicht sicher, ob man lieber einen eigenen Wert für die mobile Ansicht erstellt und den jeweiligen Sektionen zuordnet. Ist zunächst mehr Aufwand, wirkt sich aber nicht auf andere Elemente aus, die aktuell gut aussehen.

Wie sind denn deine HTML/CSS-Kenntnisse?

[Finer · Accepted solution]

@Nils_MOOT dazu müsstest du über dem Code-Editor des Themes in die css-variables.liquid gehen und den Wert bei "--gutter" den gewünschten Wert anpassen (bsp. von 60px auf 20px). 

Allerdings muss man bedenken, dass die Variable "--gutter" an unterschiedlichsten Stellen und auch in der Desktop-Ansicht verwendet wird. Daher kann sich das auch auf andere Elemente auswirken. 

Ich bin mir nicht sicher, ob man lieber einen eigenen Wert für die mobile Ansicht erstellt und den jeweiligen Sektionen zuordnet. Ist zunächst mehr Aufwand, wirkt sich aber nicht auf andere Elemente aus, die aktuell gut aussehen.

Wie sind denn deine HTML/CSS-Kenntnisse?

[Nils_MOOT]

Hey @Finer! Danke Dir! Mit 30px passt das insgesamt mobil und am Desktop ganz gut. Weißt Du zufällig noch, wie ich den "Bekannt aus"-Text kleiner mache? Der lässt sich über die Theme-Einstellungen leider nicht anpassen, da er weder auf Heading, noch Subheading oder Body reagiert.

Vielen Dank Dir!
Nils

[Finer]

@Nils_MOOT dazu kannst du in der theme.css ganz am Ende folgendes Eintragen:

/* Changes Font Size of Press Section */

.press__item p {
    font-size: 10px; <-- Diesen Wert musst du anpassen
}

Sollte das nicht greifen, müsste man ggf. in der theme.dev.css das noch einfügen. Aber probier es erst mal so aus. 

Ganz wichtig: Mach das am besten in einer Sicherheitskopie des aktuellen Themes!

[Nils_MOOT]

Super, das klappt! Tausend Dank Dir 🙂

[mikesch23]

Hey Finer, danke für deine Hilfe! Kann ich da nochmal was nachfragen? Ich suche im Code-Editor nach diesen css.variables.liquid, aber kann es nicht finden. Ich benutzt ein Standard Theme von Shopify, aber dort ist nichts von diesem ..liquid. Kannst du eventuell nochmal per Bild zeigen, wo er sich befindet und vielleicht, ob es hierfür eine andere Bezeichnung gibt? Auf eine Antwort freue ich mich sehr! MfG 

[Kai · Accepted solution]

Hi Nils_MOOT,

es freut mich sehr zu hören, dass Finers Vorschlag dir bereits weiterhelfen konnte.

Ich wollte nur noch ein paar Dinge verlinken.

Zum einen die Themekopie, damit du immer eine funktionierende Version deines Shopify Shops gesichert hast, für den Fall der Fälle.

Dasselbe kannst du übrigens auch für deine Produkte, Bestellungen, Kundenlisten und Rechnungen tun.

Zum anderen kannst du bei Themefragen auch immer die Themedesigner kontaktieren, deren Kontaktdaten du auf der Themeseite in unserem Themestore findest:

Du kannst hier im Forum fragen oder einen Shopify Experten einstellen.

Was für Produkte verkaufst du über deinen Shopify Shop, wer ist deine Zielgruppe und wie erreichst du die?