Anpassung die nur die mobile Version betreffen

Anpassung die nur die mobile Version betreffen

Tutorial: https://www.youtube.com/watch?v=yU7jJ3NbPdA

@media only screen and (max-width:767px) {

  .class1 #id1 #id2 #id3 {
    property: value !important;
  }

  .class2 #id1 #id4 {
    property: value !important;
  }
}

fixiertes mobiles Menü

@media only screen and (max-width:767px){
    .responsive #top #wrap_all #header {
        position: fixed;
    }
    .responsive #top #main {
        margin-top: 60px;
    }
}
}

iFrame Größe anpassen

Wert bei vh (vertical height) anpassen nach Einsatzzweck

/*Responsive mobiles Layout*/
@media only screen and (max-width:767px) {

.mfp-iframe-scaler {
        height: 70vh;
    }
}

Back To Top / Scroll Up Arrow

BTT / SU Arrow mobil wieder einblenden

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block !important;
}
}

Responsiver Text

am einfachsten kann man responsiven Text programmieren indem man statt Pixel (px) die Viewport Width (vw) nutzt, die größe des Textes also vollständig von der Fenster/Gerätegröße abhängig macht.

Beispiel:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>

Mehr Kontrolle hat man indem man via Media Queries bestimmte Textgrößen für bestimmte Bildschirmgrößen festlegt.

Beispiel:

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}