Debut Theme Container Breite Produkt und Blog

[Ecoora]

Hallo zusammen,

ich möchte bei meinem Shop die Containerbreite von Blogbeiträgen anpassen da diese zu breit sind. Das gleiche gilt auch für die Produkbeschreibung. Diese habe ich bereits in zwei Teile aufgeteilt, dass im oberen Teil eine kurze Beschreibung vorhanden ist und unten ein weiterer Text erscheint. Die Breite hätte ich hier gerne zentriert mit etwa 800px.

Auf der mobilen Ansicht passt alles soweit. Ich hoffe es kann mir jemand weiterhelfen 😊

die Shop URL ist https://ecoora.de/

[Gabe]

Hey @Ecoora 

Danke für die Frage und die URL und ich habe dein Shop jetzt angeschaut. In deinem Fall empfehle ich sehr mit einem Experten zu arbeiten, der das für dich gegen eine kleine Spende macht. Einen den ich empfehle ist www.taskhusky.com.

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

[Ecoora]

Vielen Dank für die Antwort. Ich dachte es gibt eine einfache Möglichkeit diese im CSS Bereich anzupassen.

[Gabe · Accepted solution]

@Ecoora 

Ja, das kann man so machen aber es kann messy werden. Hast du es mittlerweile geschafft (wenn ich dein Shop so betrachte)?

Um die Produktbeschreibung auf Desktop zu zentrieren kann man einen CSS Code wie folgt verwenden aber immer zuerst in einer Theme Kopie testen:

@media only screen and (min-width: 750px){
#shopify-section-1599759698099 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599759698099 .price {display: inline-grid;}
#shopify-section-1599759698099 .product-single__title {text-align: center;}
#shopify-section-1599759698099 .product__policies {text-align: center;}
#shopify-section-1599759698099 .product-form--payment-button-no-variants {max-width: 100%;width: 33%;text-align: center;margin: 0 auto;}
}

Die Zeile @media only screen and (min-width: 750px){ beinhaltet nur Desktop. Um nur Mobile zu beinhalten ändert man diese Zeile zu @media only screen and (max-width: 749px){ und passt den Code dem Mobile Screen an, wie z. B. mit folgenden Code:

@media only screen and (max-width: 749px){
#shopify-section-1599759698099 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599759698099 .price {display: inline-grid;}
#shopify-section-1599759698099 .product__price, .featured-product__price {text-align: center;}
#shopify-section-1599759698099 .product-single__title {text-align: center;}
#shopify-section-1599759698099 .product__policies {text-align: center;}

#shopify-section-1599762053516 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599762053516 .price {display: inline-grid;}
#shopify-section-1599762053516 .product__price, .featured-product__price {text-align: center;}
#shopify-section-1599762053516 .product-single__title {text-align: center;}
#shopify-section-1599762053516 .product__policies {text-align: center;}
}

Dasselbe für den Blog und im div.grid ein Desktop CSS wie das folgende und die width angeben:

media only screen and (min-width: 750px)
.medium-up--five-sixths {
    width: X%;

 Ansonsten wie läuft das Geschäft mit der Infusion Flasche? Ein tolles Produkt ist das!

[Ecoora]

Vielen Dank für das bereitstellen des Codes. Jedoch hat dieser nicht wie gewünscht funktioniert. Ich konnte den Code selbst so anpassen, dass ich in der Lage war die Inhaltsbreite zu reduzieren.😊

[Gabe]

Hey @Ecoora 

Das ist Musik in meinen Ohren!