Mobirise-Tutorials.com

Code: Alles auswählen

body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Code: Alles auswählen

      <div class="col-md-4 order-md-2 rot">Rot</div>
      <div class="col-md-4 order-md-3 gelb">Gelb</div>
      <div class="col-md-4 order-md-1 blau">Blau</div>

Code: Alles auswählen

            <div class="col-12 col-md-6 col-lg-4 offset-lg-1 order-md-2">
                <div mbr-if="showImage" class="footer_logo text-center">
                        <img src="../_images/logo_orange.png" alt="Mobirise" mbr-style="{'height': imageSize + 'rem'}">
                    </div>
                      <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex voluptatem voluptas aut quod, autem obcaecati molestiae.</p>
                <div class="icons_footer" mbr-if="showIcons">
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank">
                                <span mbr-icon class="mbr-iconfont socicon-facebook socicon"></span>
                            </a>
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 1">
                                <span mbr-icon class="mbr-iconfont socicon-twitter socicon"></span>
                            </a>
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 2">
                                <span mbr-icon class="mbr-iconfont socicon-instagram socicon"></span>
                            </a>
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 3">
                                <span mbr-icon class="mbr-iconfont socicon-linkedin socicon"></span>
                            </a>
                        </div>
            </div>            
            
            <div class="col-12 col-md-3 col-lg-3 order-md-1" mbr-if="showTitle || showText">
                <div class="footer_contact text-center">
                      <h5 class="mbr-section-title mbr-fonts-style" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-5">Contact Us</h5>
                      <p class="mbr-text mb-0 mbr-fonts-style" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-4"><a href="#" class="text-danger">350 5th Ave, New York, NY 10118</a>
                          <br><br>
                        <a href="tel:12345678900" class="text-danger">+1 234-567-8900</a>
                                                      <br>
                        <a href="tel:98765432100" class="text-danger">+9 876-543-2100</a>
                        </p>
                  </div>
            </div>

            <div class="col-12 col-md-3 col-lg-3 offset-lg-1 order-md-3" mbr-if="showTitle || showText">
                <div class="footer_timework text-center">
                      <h5 class="mbr-section-title mbr-fonts-style" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-5">Working Hours</h5>
                      <p class="mbr-text mb-0 mbr-fonts-style" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-4">
                          Monday-Friday:<br>
                            09:00-22:00
                          <br><br>
                            Saturday-Sunday:<br>
                            10:00-16:00

                        </p>
                  </div>
            </div>

Code: Alles auswählen

@media (max-width: 767px) {
  .footer_timework {
    margin-top: 50px;
  }
  .footer_contact {
    margin-top: 50px;
  }
}