Responsive

Here is a link to how the website looks on a computer (looks great!):
https://www.hpaspartanburg.com/screenshots/How-it-looks-on-a-computer.png

Here is how it is showing up on a mobile phone:
https://www.hpaspartanburg.com/screenshots/How-it-looks-on-mobile-device.jpg

Below is the Custom CSS i am currently using for this MS Slide:

.slider-ms-info h2, .slider-ms-info a {color: #000000 ;
font-weight: bold;
  opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
.slider-ms-info div {color: #0000A0;
 font-size: 12px;
}

Anyone???

Hi,

Please add the below code to Slider custom styles:

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

 .master-slider {
   margin: 0 !important;
 }
 .ms-slide-info.ms-dir-v {
     top: 0;
     position: static;
     width: auto !important;
     padding: 0 20px;
 }

 .ms-info {
        margin-top: 20px;
    }
}

.ms-slide-info {
    overflow: auto;
    height: 100%;
}

If the problem persists, please let us know.

Have a great weekend.

Best,

Thanks for the reply!

I added the code above (and also added a bit of other css customization to change font color, etc,) However, it is showing the slider very small instead of stretching it across the actual screen size, and the “recent posts” that shows beside the slider photos is showing up under the slider and is very large and long…. any suggestions on how to make this look better?

here is all the custom css I have currently for this master slider

.slider-ms-info h2, .slider-ms-info a {color: #000000 ;
font-weight: bold;
  opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
.slider-ms-info div {color: #0000A0;
 font-size: 12px;
}
@media screen and (max-width: 750px) {

  .slider-ms-info h2, .slider-ms-info a {color: #ffffff ;
font-weight: bold;
  opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
.slider-ms-info div {color: #0000A0;
 font-size: 12px;
}
 .master-slider {
   margin: 0 !important;
 }
 .ms-slide-info.ms-dir-v {
     top: 0;
     position: static;
     width: auto !important;
     padding: 0 20px;
 }

 .ms-info {
        margin-top: 20px;
    }
}

.ms-slide-info {
    overflow: auto;
    height: 100%;
}

here is a screenshot of what it is looking like on a mobile phone (Galaxy S8)..

https://hpaspartanburg.com/Screenshot_20180602-112550_Chrome.jpg

Looks like I was able to resolve this by adding this:

width: auto !important;

to this section of code:

 .master-slider {
   margin: 0 !important;
 }

??

Hi again @paratrooperoe,

I’m happy the issue has been resolved.

If you are satisfied with Master Slider and our services, please take a moment and give it a review. We would greatly appreciate it.

Rate Us

Have a nice sunny Sunday ??

Best,