Adjust Mobile Homepage Slider Aspect Ratio

  • Changed the code to render the height of the homepage slider dynamically in the ratio 4:3.
  • // Increase the slider height on mobile
  • .home-image-slider .bx-wrapper {
  •   @media (max-width: $screen-xs-max) {
  •     width: 100vw !important; /* Full viewport width */
  •     height: calc(100vw * 3 / 4) !important; /* Maintain 4:3 ratio */
  •     .bx-viewport {
  •       width: 100vw !important;
  •       height: calc(100vw * 3 / 4) !important;
  •     }
  •   }
  • }
  • #home-slide-image-mobile {
  •   @media (max-width: $screen-xs-max) {
  •     width: 100vw; /* Full viewport width */
  •     height: calc(100vw * 3 / 4); /* Maintain 4:3 ratio */
  •   }
  • }

Leave a comment

Your email address will not be published. Required fields are marked *