Jump to content

Photo
- - - - -

Wie kann ich Abstände im Layout meiner Website reduzieren?

Website-Layout

Best Answer Artar , 04 February 2025 - 13:31

Hallo Neil,

 

du kannst die Abstände im Layout-Stil definieren.

Dazu können Bootstrap-Klassen verwendet werden:

https://getbootstrap...lities/spacing/

 

n8Kml8c.png

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 Atempause

Atempause

    Benutzer

  • Members
  • 441 posts

Posted 31 January 2025 - 12:42

ich arbeite gerade an meinem Website-Layout und möchte die Abstände in einigen Bereichen reduzieren. Ich habe ein Screenshot beigefügt, auf dem ich die Stellen markiert habe, die ich anpassen möchte. Konkret betrifft es:

  1. Die Abstände zwischen den Menü-Elementen in der oberen Leiste
  2. Die Lücken zwischen den Produktbildern/Karten
  3. Den Abstand zwischen den Hauptsektionen (z. B. "Shop by Dunoon Mug Design") und anderen Elementen.

Ich verwende Page-Builder, bin mir aber nicht sicher, welche Einstellungen oder CSS-Regeln ich anpassen muss, um diese Änderungen umzusetzen.

Hat jemand Tipps, wie ich die Abstände effizient verkleinern kann? Oder welche CSS-Eigenschaften ich genauer prüfen sollte?

Vielen Dank für eure Hilfe! 😊

Grüße,

Neil



#2 stefanmueller

stefanmueller

    SmartStore AG

  • Administrators
  • 537 posts

Posted 03 February 2025 - 10:13

Hallo Atempause, der screenshot ist leider nicht zu sehen. Gruß, Stefan


  • Atempause likes this

Stefan


#3 Atempause

Atempause

    Benutzer

  • Members
  • 441 posts

Posted 03 February 2025 - 18:31

moin Stefan,

ich glaube jetzt muss der Bild da sein.

grüße

Neil

 

Attached Images

  • Screenshot 2025-01-31 102907.png


#4 Artar

Artar

    SmartStore AG

  • Administrators
  • 1021 posts

Posted 04 February 2025 - 13:31   Best Answer

Hallo Neil,

 

du kannst die Abstände im Layout-Stil definieren.

Dazu können Bootstrap-Klassen verwendet werden:

https://getbootstrap...lities/spacing/

 

n8Kml8c.png


  • stefanmueller likes this

Zihni Artar
SmartStore AG


#5 stefanmueller

stefanmueller

    SmartStore AG

  • Administrators
  • 537 posts

Posted 05 February 2025 - 11:50

Hallo Atempause, wie ich auf deinem Shop sehe, schaut es jetzt kompakter aus. Welche Werte hast du in CSS Klasse eingetragen?


Stefan


#6 Atempause

Atempause

    Benutzer

  • Members
  • 441 posts

Posted 05 February 2025 - 14:57

css-p-o



#7 Atempause

Atempause

    Benutzer

  • Members
  • 441 posts

Posted 05 February 2025 - 14:57

css py-o


  • stefanmueller likes this

#8 Atempause

Atempause

    Benutzer

  • Members
  • 441 posts

Posted 06 February 2025 - 12:33

Hallo Herr Arter,
vielen Dank für Ihren Tipp – damit konnte ich meine Probleme im oberen Bereich lösen. Nun tritt aber das gleiche Problem unten auf. Könnten Sie mir bitte auch dafür eine Lösung empfehlen?

Danke und viele Grüße!

 

in meinem Shop/Theme sind die Abstände (z. B. Margin/Padding) zwischen den Kürzlich angesehen

und obere bild. zu groß. Ich möchte sie gerne verkleinern, damit alles kompakter wirkt.

Kann mir jemand einen Tipp geben, wie ich das in CSS oder im Template anpassen kann?

Vielen Dank im Voraus!

 

Attached Images

  • smartstore2.png


#9 Artar

Artar

    SmartStore AG

  • Administrators
  • 1021 posts

Posted 06 February 2025 - 17:31

Löschen Sie zunächst in der mobilen Ansicht (wichtig= mobile Ansicht!) ganz unten die nicht verwendeten Zellen.

 

 

 

Ghk2y2W.png

 

 

Löschen Sie zunächst in der mobilen Ansicht ganz unten die nicht verwendeten Zellen.
 
Ziehen Sie dann den Schieberegler in Richtung Mobile Landscape.
Dort werden unten ebenfalls freie Zellen angezeigt.
Diese löschen Sie nicht mehr.
Hier verteilen Sie die Blöcke über alle Zellen, so dass keine (unerwünschten) freien Zellen mehr vorhanden sind.
Wenn es in der Mobile View 2 Reihen gibt und in der Mobile Landscape 4 Reihen, ist es normal, dass unten leere Zellen bleiben.
In diesem Fall ziehen Sie die Blöcke einfach nicht über 1 vertikale Zelle, sondern über 2. So werden alle vertikalen Zellen genutzt.
Wenn unten eine Reihe übrig bleibt, kann man auch einen Block über 3 statt über 2 senkrechte Zellen ziehen. Die Größe des Blocks ändert sich dadurch nicht.
 
Freundliche GRüße
Zihni Artar

Zihni Artar
SmartStore AG


#10 Artar

Artar

    SmartStore AG

  • Administrators
  • 1021 posts

Posted 06 February 2025 - 17:39

ich habe das mal in Ihrem Shop in der Kopie der Story für die Mobile Landscape Ansicht gemacht (suchen Sie nach Kopie von shopby...)

 

gRYnUoj.png


  • stefanmueller likes this

Zihni Artar
SmartStore AG


#11 Atempause

Atempause

    Benutzer

  • Members
  • 441 posts

Posted 06 February 2025 - 23:59

super

danke


  • stefanmueller likes this