xeo5 – Webers Testseite

Alles beginnt mit ersten kreativen Idee und einer soliden Planung. Wir helfen Ihnen dabei.

/* ===== Solution 1 - easier to understand - flexbox model ==== */

@media only screen and (min-width: 768px) {

  #top #av_section_1.avia-section .container {
    width: 100% !important;
    max-width: unset;
    padding: 0 !important;
  }

  #top #av_section_1.avia-section .entry-content-wrapper:before,
  #top #av_section_1.avia-section .entry-content-wrapper:after {
    display: none;
  }


  #top #av_section_1.avia-section .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }

  #top #av_section_1.avia-section .entry-content-wrapper .flex_column:first-child {
    padding-left: calc(50vw - 755px)
  }

  #top #av_section_1.avia-section .entry-content-wrapper .flex_column:first-child > * {
    padding: 0 50px
  }
}

Alles beginnt mit ersten kreativen Idee und einer soliden Planung. Wir helfen Ihnen dabei.

Click me

/* ===== Solution 2 - Grid Layout Trial. ==== */
@media only screen and (min-width: 768px) {
  #top .avia-section.stretchy .container {
    width: 100% !important;
    max-width: unset;
    padding: 0 !important;
  }

  #top .avia-section.stretchy .entry-content-wrapper:before,
  #top .avia-section.stretchy .entry-content-wrapper:after {
    display: none;
  }

  /* === just the grid-area naming === */
  #top .avia-section.stretchy .entry-content-wrapper .flex_column:nth-of-type(1) { grid-area: feld1;}
  #top .avia-section.stretchy .entry-content-wrapper .flex_column:nth-of-type(2) { grid-area: feld2;}


  #top .avia-section.stretchy .entry-content-wrapper {
    display: grid;
    width: 100% !important;
    margin: 0;
    gap: 0;  
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr; 
    grid-template-areas:
      "feld1 feld2";
  }


  #top .avia-section.stretchy .entry-content-wrapper .flex_column {width: unset !important; margin: 0}

  #top .avia-section.stretchy .entry-content-wrapper .flex_column:nth-of-type(1) { 
    padding-left: calc(50vw - 755px);
  }

  #top .avia-section.stretchy .entry-content-wrapper .flex_column:nth-of-type(2) { 
    padding: 0 !important;
  }

  #top .avia-section.stretchy .entry-content-wrapper .flex_column:nth-of-type(1) > * {
    padding: 0 50px
  }

}

Kontakt

Telefon

E-Mail