Commit 21a53790 authored by Abdullah Yassin's avatar Abdullah Yassin Committed by Rajab Natshah
Browse files

Issue #3274601: Fix slider text overlapping arrows on mobile

parent ae32743c

VARTHEME_BS5_SUBTHEME/css/theme/varbase-heroslider-media.theme.css

+22 −1
Original line number Diff line number Diff line
@@ -79,6 +79,12 @@ 
    max-height: 600px;

  }

}

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

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

    min-height: 300px;

    max-height: 300px;

  }

}

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

  position: absolute;

  z-index: 9;
@@ -92,7 +98,12 @@ 
  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 {
@@ -171,6 +182,16 @@ 
.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;

VARTHEME_BS5_SUBTHEME/scss/theme/varbase-heroslider-media.theme.scss

+10 −1
Original line number Diff line number Diff line
@@ -129,6 +129,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;
@@ -143,7 +148,7 @@ 
    }



    .hero-slide-content {

      padding: $hero-container-v-padding;

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



      .field--name-node-title {

        h2,
@@ -191,6 +196,10 @@ 
          }

        }

      }



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

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

      }

    }



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

VARTHEME_BS5_SUBTHEME/scss/vartheme_bs5-variables.scss

+1 −1
Original line number Diff line number Diff line
@@ -51,4 +51,4 @@ $hero-min-height-md: 600px; 
$hero-max-height-md: 600px;



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

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

css/theme/varbase-heroslider-media.theme.css

+22 −1
Original line number Diff line number Diff line
@@ -79,6 +79,12 @@ 
    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;
@@ -92,7 +98,12 @@ 
  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 {
@@ -171,6 +182,16 @@ 
.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/theme/varbase-heroslider-media.theme.scss

+10 −1
Original line number Diff line number Diff line
@@ -129,6 +129,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;
@@ -143,7 +148,7 @@ 
    }



    .hero-slide-content {

      padding: $hero-container-v-padding;

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



      .field--name-node-title {

        h2,
@@ -191,6 +196,10 @@ 
          }

        }

      }



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

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

      }

    }



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