Hallo zusammen!
Ich bin gerade dabei, meine Produktseite einzurichten und habe dort ein Problem.
Wenn ich die Mediengröße auf “klein” einstelle, dann sind die Produktinformationen wie: Titel, Preis, Menge etc. nicht mehr zentriert zu der Produktbeschreibung. (siehe Screenshot)
Wie kann ich den markierten Abschnitt, so wie er ist, nach rechts verschieben, sodass er zentriert über der Produktbeschreibung steht?
Theme: Sense
Viele Grüße
Max
Hey @maximus2
Danke für den Sachverhalt und du möchtest also die Inhalte des Produktinformationen Blocks auf der Sense Theme PDP nach rechts verschieben und die Produktbeschreibung zentrieren.
Hast du auch die Vor- und Nachteile abgewägt von dem was du erreichen möchtest? Tbh, Ich selber würde es empfehlen den Layout so wie er im Sense Theme out-of-the-box kommt, zu lassen, denn das was du erreichen möchtest könnte auch u. U. nch hinten losgehen, sprich, nicht besonders schön aussehen v.a. auf Mobile, meiner Meinung nach. Aber 
wir weiter wie man das erreichen kann.
An erster Stelle machst du das ganze hoffentlich in einer Testumgebung, sprich, in einer Kopie des Sense Themes und NICHT im Live Theme nehme ich an?
Ich bin jetzt folgende Schritte in meinem Test-Sense Theme gegangen:
markup
Beachte, dass direkte Änderungen am Theme deines Shops unerwartete Nebeneffekte haben können, insbesondere wenn du dich mit CSS nicht gut auskennst. Es ist immer eine gute Idee, wie gesagt, Änderungen zuerst in einer Kopie deines Themes zu testen.
.product__info-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.product__info-container {
width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
max-width: 500px; /* Max. Breite des Containers, anpassen nach Bedarf */
margin: 0 auto; /* Zentriert den Container horizontal */
}
@media (max-width: 768px) { /* Für Mobilgeräte, Breite nach Bedarf anpassen */
.product__info-container {
max-width: none; /* Entfernt die max. Breite auf kleinen Bildschirmen */
}
}
Dieser Code nutzt flexbox, um die Produktinformationen vertikal auszurichten, und zentriert den Inhaltscontainer horizontal auf der Seite. Die max-width-Eigenschaft begrenzt die Breite des Containers auf Desktop-Geräten, während sie auf Mobilgeräten entfernt wird, um die Flexibilität zu erhöhen. Die Media Queries diesen die Änderungen nur auf kleineren Bildschirmen (hier: max-width 767px, was für Tablets und Mobiltelefone typisch ist) anzuwenden. Er zentriert die Produktinformationen über der Produktbeschreibung, indem er flexbox verwendet. Die Klasse .product-single__meta--wrapper oder .product__info-container { sind Platzhalter und müssen eventuell angepasst werden, um die tatsächlichen Classes in deinem Shop zu entsprechen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 
in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Hallo Gabe,
Vielen Dank für deine schnelle Antwort, hat alles funktioniert!
Viele Grüße
Max
