Calliope theme Hero header responsive mobile

Status
Niet open voor verdere reacties.
Omdat hero geen <img> gebruikt in de html zijn de foto's niet responsive. Hero zet de foto's erin als background-image. Misschien kan background-size een oplossing geven.
Code: 
body#colibri #hero .colibri-slideshow .slideshow-image {
  background-repeat: no-repeat;
  background-size: contain !important;
}

Als het werkt probeer dan deze waarden bij background-size:
contain !important;
cover !important;
100% 100% !important;
 
Hallo,
Ik heb dit geprobeerd maar het is nog niet perfect.
Zie website (heb hem met jouw instellingen laten staan.)

De foto is nu wel kleiner geworden alleen nu staat er een zwart vlak onder. Ook als ik op de iPad formaat kijk is de slideshow niet responsive.
Ik wil graag dat de gehele slideshow responsive is.
 
Omdat deze slider met een style="background-image" werkt is background-size de enige optie voor zover ik weet. De meeste sliders werken met images <img> zodat responsive weergave heel simpel is te doen. Heb je ze alle 3 geprobeerd? De !important zie ik niet, heb je die wel geprobeerd?

Dit is de basis-html van de hero slider op jouw website waarmee je iets kan doen. Helaas niet veel mogelijkheden.
Code: 
<div data-colibri-id="5-h25" id="hero" class="h-hero d-flex align-items-center">
  <div class="background-wrapper">
    <div class="background-layer">
      <div class="background-layer">
        <div class="colibri-slideshow">
          <div class="slideshow-image" style="background-image: url(...)"></div>
          <div class="slideshow-image" style="background-image: url(...)"></div>
          <div class="slideshow-image" style="background-image: url(...)"></div>
        </div>
      </div>
      <div class="overlay-layer"></div>
      <div class="shape-layer"></div>
    </div>
  </div>
  <div class="h-separator">
    <svg>...</svg>
  </div>
  <div class="h-section-grid-container h-navigation-padding">
    ...
  </div>
</div>


Aanvulling over de css:

cover
verander afmeting dusdanig dat alles bedekt is met de foto
zelfs als de verhouding van de foto moet worden veranderd of er een stuk vanaf geknipt moet worden.

contain
verander afmeting dusdanig dat de foto volledig in de goede verhouding zichtbaar is
zelfs als er links/rechts of boven/onder een lege rand is.

In beide gevallen weet je niet wat het resultaat zal worden op een ander apparaat met een andere browser view.

De enige manier die ik kan verzinnen is met Javascript die de achtergrond foto's in het juiste formaat zet bij het laden van de pagina EN ook bij het wijzigen van de browser view de afmeting van de achtergrond foto's weer goed zet. Eigenlijk zou dit standaard in hero moeten zitten.
 
Laatst bewerkt:
Dit kan je denk ik verder helpen.
Code: 
@media (max-width: 1860px) {
    #hero .background-wrapper .colibri-slideshow .slideshow-image {
        background-repeat: no-repeat;
        background-size: 100% auto !important;
    }
    html.colibri-wp-theme #colibri [data-colibri-id="5-h25"] {
        min-height: 0%;
        padding: 0;
    }
}
#hero {
    padding: 0 !important;
}
@media (min-width: 480px) {
    #hero { padding: 5vw 0 !important; }
}
@media (min-width: 576px) {
    #hero { padding: 9vw 0 !important; }
}
@media (min-width: 768px) {
    #hero { padding: 12vw 0 !important; }
}
@media (min-width: 992px) {
    #hero { padding: 16vw 0 !important; }
}
@media (min-width: 1200px) {
    #hero { padding: 20vw 0 !important; }
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan