Commit 36b1f6cd authored by Abdullah Yassin's avatar Abdullah Yassin Committed by Rajab Natshah
Browse files

Issue #3274482: Fix slider text overlapping arrows on mobile

parent c6cbc4dc

css/components/varbase-heroslider-media.component.css

100755 → 100644
+26 −1
Original line number Diff line number Diff line
@@ -82,6 +82,13 @@ 
    max-height: 600px;

  }

}



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

  .varbase-heroslider-media .node--type-varbase-heroslider-media {

    min-height: 400px;

    max-height: 400px;

  }

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content-wrapper {

  position: absolute;

  z-index: 9;
@@ -95,7 +102,13 @@ 
  justify-content: center;

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

  padding: 60px;

  padding: calc(1.5rem + 3vw);

}



@media (min-width: 1200px) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

    padding: 3.75rem;

  }

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
@@ -183,6 +196,18 @@ 
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:active {

  opacity: 0.7;

}



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

  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

    padding: calc(1.5rem + 3vw) calc(1.625rem + 4.5vw);

  }

}



@media screen and (max-width: 576px) and (min-width: 1200px) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

    padding: 3.75rem 5rem;

  }

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {

  overflow: hidden;

  min-height: 300px;

scss/components/varbase-heroslider-media.component.scss

+10 −1
Original line number Diff line number Diff line
@@ -122,6 +122,11 @@ 
      max-height: $hero-max-height-md;

    }



    @media screen and (max-width: map-get($grid-breakpoints, "sm")) {

      min-height: $hero-min-height-sm;

      max-height: $hero-max-height-sm;

    }



    .hero-slide-content-wrapper {

      position: absolute;

      z-index: 9;
@@ -136,7 +141,7 @@ 
    }



    .hero-slide-content {

      padding: $hero-container-v-padding;

      @include padding($hero-container-v-padding);



      .field--name-node-title {

        h2,
@@ -184,6 +189,10 @@ 
          }

        }

      }



      @media screen and (max-width: map-get($grid-breakpoints, "sm")) {

        @include padding($hero-container-v-padding $hero-container-h-padding);

      }

    }



    .field--name-field-media-single {

scss/variables.scss

+3 −2
Original line number Diff line number Diff line
@@ -49,11 +49,12 @@ $hero-min-height: 300px; 
$hero-max-height: 300px;



// For screen size sm and more.

$hero-min-height-sm: 300px;

$hero-max-height-sm: 300px;

$hero-min-height-sm: 400px;

$hero-max-height-sm: 400px;



// For screen size md and more.

$hero-min-height-md: 600px;

$hero-max-height-md: 600px;



$hero-container-v-padding: 60px;

$hero-container-h-padding: 80px;