Seite wird sehr schmal angezeigt

[Nooeberlin]

Hallo,

ich habe eine neue Seite erstellt.

https://nooeberlin.com/pages/shop-local

Diese wird ganz schmal angezeigt und leider weiß ich nicht warum.

Kann mir jemand helfen?

Anbei ein Screenshot der Einstellungen.

Genießt die Sonne. Eva

[Gabe]

Hey @Nooeberlin 

Danke für den Link und viele Grüße an das schöne Kreuzberg! 

Im Folgendem werde ich den HTML und den CSS deiner Page etwas eingehen denn da gibt es ein paar Dinge zu klären:

Es scheint du hast einen fertigen Text samt HTML Code in deinem Page RTE (rich text editor) im Page Admin eingefügt, ist das richtig? Gehe in deinen Page RTE und klicke auf den folgenden Button:

Hast du den Text per Copy & Paste von woanders genommen? Die CSS-Class "FeaturedMap__Info" scheint Eigenschaften zu haben, die dazu führen, dass dein Text in einer schmalen Spalte angezeigt wird, wie z. B. den <Blockquote> HTML Element, dass den Text im Zitat Block darstellt:

<div class="FeaturedMap__Info" style="text-align: left;">
<blockquote>Du möchtest unsere Stücke live sehen oder magst online Shopping einfach nicht? Du kannst uns in drei Cafes und einer Manufaktur in Berlin finden. Wir haben keinen eigenen Laden und unsere Werkstatt in Kreuzberg ist meist ein kreatives "vollkommenes" Chaos. Leider kann man uns nicht besuchen kommen. Unsere Schmuck ist im Das Gretel in Kreuzberg, sowie im Take a Brake in Kreuzberg, bei Seifenwaren in Marzahn im Erchys in Mitte zu finden. <br /> <br />Dort gibt es jeweils eine kleine Auswahl unseres Schmucks. Hier möchten wir euch unsere Lieblingsläden vorstellen.<br />Happy offline shopping!  </blockquote>

Du kannst jedoch versuchen, einige Inline-Stile zu deinem HTML-Code hinzuzufügen, um die CSS-Regeln außer Kraft zu setzen, z. B. durch Hinzufügen der Eigenschaft <width>:

<div class="FeaturedMap__Info" style="text-align: left; width:100%;">

Im folgenden CSS auf der Page werden Regeln festgelegt, dass die Mindestbreite und die Breite von Elementen mit der Class FeaturedMap__Info 370px betragen sollten. Das Padding fügt zusätzlichen Platz auf der linken und rechten Seite des Inhalts innerhalb des Elements hinzu, aber dieser Platz wird nicht in die Breite eingerechnet.

Wenn du die Breite des Inhalts erhöhen oder ihn responsiv machen willst, kannst du diese Werte anpassen oder die Regel für die feste Breite ganz aufheben.

@media screen and (min-width: 641px)
.FeaturedMap__Info {
    flex: none;
    min-width: 370px;
    width: 370px;
    padding: 50px 60px;
}

Die fixed_width erhöhen:

@media screen and (min-width: 641px)
.FeaturedMap__Info {
    flex: none;
    min-width: 600px; // beliebig anpassen
    width: 600px; // beliebig anpassen
    padding: 50px 60px;
}

Die fixed_width responsive machen:

@media screen and (min-width: 641px)
.FeaturedMap__Info {
    flex: none;
    min-width: 370px; // Mindestbreite, um zu verhindern, dass der Inhalt zu klein wird
    width: 100%; // nimmt die gesamte verfügbare Breite ein
    padding: 50px 60px;
}

Ansonsten wäre das einfachste den ganzen Text im RTE zu löschen und manuell reinzuschreiben anstatt ihn von woanders einzukopieren.

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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.