Title: Responsive
Last modified: May 29, 2018

---

# Responsive

 *  Resolved [Paratrooper Joe](https://wordpress.org/support/users/paratrooperoe/)
 * (@paratrooperoe)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/)
 * I am wanting to make the slider and the sidebar that contains text/recent events,
   auto adjust according to screen size. what would be great, is if on mobile phones,
   the “sidebar” area would auto adjust like the pictures are already doing. However,
   currently, the Sidebar area is really huge and just not sizing correctly.
 * Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [Paratrooper Joe](https://wordpress.org/support/users/paratrooperoe/)
 * (@paratrooperoe)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10338588)
 * 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](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](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;
       }
       ```
   
 *  Thread Starter [Paratrooper Joe](https://wordpress.org/support/users/paratrooperoe/)
 * (@paratrooperoe)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10351916)
 * Anyone???
 *  Plugin Contributor [averta support](https://wordpress.org/support/users/averta_support/)
 * (@averta_support)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10354176)
 * 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,
 *  Thread Starter [Paratrooper Joe](https://wordpress.org/support/users/paratrooperoe/)
 * (@paratrooperoe)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10354983)
 * 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)..
 * [http://hpaspartanburg.com/Screenshot_20180602-112550_Chrome.jpg](http://hpaspartanburg.com/Screenshot_20180602-112550_Chrome.jpg)
 *  Thread Starter [Paratrooper Joe](https://wordpress.org/support/users/paratrooperoe/)
 * (@paratrooperoe)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10356174)
 * Looks like I was able to resolve this by adding this:
 * `width: auto !important;`
 * to this section of code:
 *     ```
        .master-slider {
          margin: 0 !important;
        }
       ```
   
 * 🙂
 *  Plugin Contributor [averta support](https://wordpress.org/support/users/averta_support/)
 * (@averta_support)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10356455)
 * Hi again [@paratrooperoe](https://wordpress.org/support/users/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](https://wordpress.org/support/plugin/master-slider/reviews/)
 * Have a nice sunny Sunday 🙂
 * Best,

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Responsive’ is closed to new replies.

 * ![](https://ps.w.org/master-slider/assets/icon-256x256.png?rev=1638064)
 * [Master Slider - Responsive Touch Slider](https://wordpress.org/plugins/master-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/master-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/master-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/master-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/master-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/master-slider/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 6 replies
 * 2 participants
 * Last reply from: [averta support](https://wordpress.org/support/users/averta_support/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/responsive-357/#post-10356455)
 * Status: resolved