FROM CACHE - de_header
Gelöst

Debut Theme Container Breite Produkt und Blog

Ecoora
Neues Mitglied
4 0 0

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/

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
16713 2637 3915

Erfolg.

@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!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
16713 2637 3915

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!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Ecoora
Neues Mitglied
4 0 0

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

Gabe
Shopify Staff
16713 2637 3915

Erfolg.

@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!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Ecoora
Neues Mitglied
4 0 0

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
Shopify Staff
16713 2637 3915

Hey @Ecoora 

 

Das ist Musik in meinen Ohren!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog