Blöcke nebeneinander Platzieren

[automatensnack]

Hallo, 

weiß jemand, wie man die Blöcke 1 & 2 nebeneinander bekommt statt untereinander ?
Ich benutze das Sense Theme.

Danke!

[Gabe]

Hey @automatensnack 

Die oben abgebildeten Grids sind in das Theme ge-hardcoded und um sie nebeneinander zu haben, würde eine ziemlich Code Anpassung verlangen. Kostenschätzung mit einem Programmierer: um die €5k.

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!

Du könntest CSS flexbox verwenden aber ich habe da meine Zweifel. Stelle sicher, dass beide Blöcke in einem gemeinsamen Container enthalten sind wie folgt aus meinem Sense Theme in der Developer Console entnommen.

<div class="container">
  <div class="block1">
    <div class="isolate">
      <div class="rich-text content-container color-background-1 gradient rich-text--full-width content-container--full-width section-template--22571138056541__rich_text_aMfVHC-padding">
        <div class="rich-text__wrapper rich-text__wrapper--center page-width">
          <div class="rich-text__blocks center">
            <h2 class="rich-text__heading rte inline-richtext h1 scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
              Talk about your brand
            </h2>
            <div class="rich-text__text rte scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 1;">
              <p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>
            </div>
            <div class="rich-text__buttons scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
              <a role="link" aria-disabled="true" class="button button--primary">Button label</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block2">
    <section id="shopify-section-template--22571138056541__contact_form_YKg3rg" class="shopify-section section">
      <link href="//mind-mapper.co.uk/cdn/shop/t/225/assets/section-contact-form.css?v=124756058432495035521714137603" rel="stylesheet" type="text/css" media="all">
      <style data-shopify="">
        .section-template--22571138056541__contact_form_YKg3rg-padding {
          padding-top: 27px;
          padding-bottom: 27px;
        }

        @media screen and (min-width: 750px) {
          .section-template--22571138056541__contact_form_YKg3rg-padding {
            padding-top: 36px;
            padding-bottom: 36px;
          }
        }
      </style>
      <div class="color-background-1 gradient">
        <div class="contact page-width page-width--narrow section-template--22571138056541__contact_form_YKg3rg-padding">
          <h2 class="title title-wrapper--no-top-margin inline-richtext h1 scroll-trigger animate--slide-in">
            Contact form
          </h2>
          <form method="post" action="/contact#ContactForm" id="ContactForm" accept-charset="UTF-8" class="isolate scroll-trigger animate--slide-in">
            <input type="hidden" name="form_type" value="contact">
            <input type="hidden" name="utf8" value="✓">
            <div class="contact__fields">
              <div class="field">
                <input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[Name]" value="" placeholder="Name">
                <label class="field__label" for="ContactForm-name">Name</label>
              </div>
              <div class="field field--with-error">
                <input autocomplete="email" type="email" id="ContactForm-email" class="field__input" name="contact[email]" spellcheck="false" autocapitalize="off" value="" aria-required="true" placeholder="Email">
                <label class="field__label" for="ContactForm-email">Email
                  <span aria-hidden="true">*</span></label>
              </div>
            </div>
            <div class="field">
              <input type="tel" id="ContactForm-phone" class="field__input" autocomplete="tel" name="contact[Phone number]" pattern="[0-9\-]*" value="" placeholder="Phone number">
              <label class="field__label" for="ContactForm-phone">Phone number</label>
            </div>
            <div class="field">
              <textarea rows="10" id="ContactForm-body" class="text-area field__input" name="contact[Comment]" placeholder="Comment"></textarea>
              <label class="form__label field__label" for="ContactForm-body">Comment</label>
            </div>
            <div class="contact__button">
              <button type="submit" class="button">
                Send
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  </div>
</div>

Füge die folgenden CSS-Regeln hinzu, um die beiden Blöcke nebeneinander anzuordnen:

.container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Abstand zwischen den Blöcken */
}

.block1, .block2 {
  flex: 1;
  min-width: 45%; /* Mindestens 45% der Breite für jeden Block */
}

@media (max-width: 750px) {
  .container {
    flex-direction: column;
  }
}

• Flexbox Container: Der container-Div verwendet display: flex, um die beiden Blöcke nebeneinander anzuordnen.
• Flex-Kinder: Die block1 und block2 Divs haben flex: 1, um ihnen gleiche Flex-Werte zu geben und min-width: 45%, um sicherzustellen, dass sie mindestens 45% der Breite einnehmen.
• Abstand: gap: 20px fügt einen Abstand zwischen den beiden Blöcken hinzu.
• Responsive Design: Ein Media-Query ändert das Layout für Bildschirme mit einer Breite von 750px oder weniger, um die Blöcke untereinander anzuordnen (flex-direction: column).

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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.