Commit 5b807819 authored by Abdullah Yassin's avatar Abdullah Yassin Committed by Rajab Natshah
Browse files

Issue #3274601 by Abdullah Yassin: Fix slider text overlapping arrows on mobile in Vartheme BS5

parent 21a53790

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

+2 −2
Original line number Diff line number Diff line
@@ -184,12 +184,12 @@ 
}

@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);

    padding: calc(1.5rem + 3vw) calc(2.0625rem + 9.75vw);

  }

}

@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;

    padding: 3.75rem 9.375rem;

  }

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .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;
 
$hero-container-h-padding-sm: 150px;

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

+2 −2
Original line number Diff line number Diff line
@@ -184,12 +184,12 @@ 
}

@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);

    padding: calc(1.5rem + 3vw) calc(2.0625rem + 9.75vw);

  }

}

@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;

    padding: 3.75rem 9.375rem;

  }

}

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

scss/variables.scss

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



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

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

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





// #############################################################################