Full width slider

[rosegraham]

I’m trying to make a responsive full width slider. Right now the sides of the photos in the slider get cut off when I switch to mobile phone. I want the full width, even on mobile phone. Does anyone know how I can fix this?

This is the code in CSS right now:

.owl-carousel.home-slider {
position: relative;
height: 750px;
z-index: 0;
}
.owl-carousel.home-slider .slider-item {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 750px;
position: relative;
z-index: 0;
}

  @media and (max-width: 1199.98px) {
    .owl-carousel.home-slider .slider-item {
      background-position: center center !important;

      } }

  .owl-carousel.home-slider .slider-item .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    opacity: .3; }
  .owl-carousel.home-slider .slider-item .slider-text {
    color: #fff;
    height: 750px;
    text-align: right; }
    @media (min-width: 992px) {
      .owl-carousel.home-slider .slider-item .slider-text .order-md-last {
        text-align: left !important; } }
    @media (max-width: 767.98px) {
      .owl-carousel.home-slider .slider-item .slider-text {
        text-align: center; } }
    .owl-carousel.home-slider .slider-item .slider-text .header-logo img {

display: inline-block;
width: 100%;

} }

[Beverleyh]

Can’t really tell much from what’s posted. Please mock up a reduced demo in CodePen so that we can see a reduced test-case of the issue firsthand. Note that we don’t need your whole codebase.

[Author]

Posts