Focal Theme Newsletter Background entfernen / removal

[scooperTeam]

Hallo Leute,

ich versuche im Theme " Focal " das Hintergrundbild im Newsletter.Liquid ab einer bestimmten Größe verschwinden zu lassen. Habe schon einiges in Richtung Media Queries probiert, bislang aber ohne Erfolg. Ich hoffe, dass mir jemand helfen kann. 

Danke.

Gruß

Simon

Hello Guys, 

In the theme " Focal "  I'm trying to hide the background picture inside the newsletter.liquid for a certain view width. I tried to get along with media queries but without success so far. Hopefully someone can help. 

Kind regards

Simon

[Gabe]

Hey @scooperTeam 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Suche den Bereich, in dem sich das Newsletter-Formular befindet überprüfe den HTML-Code, um das Hintergrundbild zu finden. Es sollte etwas wie <div class="newsletter" style="background-image: url('your-image-url.jpg');"> aussehen. Füge einen zusätzlichen CSS-Code hinzu, um das Hintergrundbild zu verstecken, wenn die Bildschirmgröße eine bestimmte Schwelle überschreitet mit den Media Queries. Zum Beispiel:

@media (max-width: 768px) {
  .newsletter {
    background-image: none !important; /* Verstecke das Hintergrundbild */
  }
}

Bitte beachte, dass die oben genannten Schritte von der genauen Struktur und den IDs oder Classes im "Focal"-Theme abhängen können. Die findest du in der Chrome Developer Console -> Rechtsklick auf Stelle -> "Inspect".

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

[scooperTeam]

Guten Morgen Gabe, 

danke für die Antwort und erste Lösungsansätze. 

Hier ist ein temporärer Vorschaucode für unsere Seite: https://gwwccb65qydq9k1c-59887812786.shopifypreview.com

In der Section über dem Footer sieht man das Bild, um das es geht. Leider funktioniert die Vorgehensweise, wie du sie geschildert hast nicht, auf die Art und weise habe ich es bereits versucht. 

Hier ist der Code-Abschnitt aus dem Newsletter zu sehen und ich habe bereits versucht in der theme.css Datei mit einem Media Query die entsprechende class, in der das Bild ist, auszublenden.  Bisher ohne Erfolg.

<section class="section section--flush">
  <image-with-text-block {% if section.settings.reveal_on_scroll %}reveal-on-scroll{% endif %} class="image-with-text-block image-with-text-block--small image-with-text-block--cover">
    <div class="image-with-text-block__image-wrapper">
      {%- if section.settings.image != blank -%}
        <img class="image-with-text-block__image" {% if section.settings.reveal_on_scroll %}reveal{% endif %} loading="lazy" sizes="100vw" {% render 'image-attributes', image: section.settings.image, sizes: '600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000' %}>
      {%- else -%}
        {%- capture image_classes -%}image-with-text-block__image image-with-text-block__image--placeholder placeholder-background{%- endcapture -%}

        {%- if section.settings.reveal_on_scroll -%}
          {{- 'lifestyle-1' | placeholder_svg_tag: image_classes | replace: '<svg', '<svg reveal' -}}
        {%- else -%}
          {{- 'lifestyle-1' | placeholder_svg_tag: image_classes -}}
        {%- endif -%}
      {%- endif -%}
    </div>

 Ich hoffe, das bringt etwas mehr Licht in's Dunkle. 

Beste Grüße

Simon

[Gabe · Accepted solution]

Hey Simon! @scooperTeam 

Es sieht so aus, als ob das Bild in der image-with-text-block__image-Klasse enthalten ist. Um das Hintergrundbild in dieser Klasse ab einer bestimmten Bildschirmgröße auszublenden, den folgenden CSS-Code in der theme.css-Datei oder eine entsprechende CSS-Anpassungsdatei testen:

@media (max-width: 768px) { /* Ändere 768px entsprechend der gewünschten Schwelle */
  .image-with-text-block__image {
    display: none !important; /* Verstecke das Hintergrundbild */
  }
}

Stelle sicher, dass die Bildschirmgröße (max-width: 768px) entsprechend deinen Anforderungen angepasst ist. Dieser Code sollte hoffentlich das Hintergrundbild in der Klasse image-with-text-block__image ausblenden, wenn die Bildschirmgröße kleiner oder gleich der angegebenen Schwelle ist.

GGf. können dir die Theme Entwickler auch helfen falls du sie kontaktierst? Falls das nicht hilft, poste deine Frage auf Englisch samt allen Angaben aus diesem Leitfaden in unserem Design Forum hier.

[scooperTeam]

Hi Gabe, vielen Dank für die Unterstützung. Tatsächlich hat bei meinen bisherigen Versuchen lediglich !important gefehlt. Manchmal sind's die kleinen Dinge.

Beste Grüße

Simon

[Gabe]

Ah super freut mich! 😉