Master Slider Responsive Text Issue

  • cruickal

    (@cruickal)


    10 years ago

    So I’ve been tinkering with this plug in for a few days. I’m reaching the final stages of mobile browser testing and I notice this issue.

    The text is responding. However, I wanted a part of the text to be highlighted and stand out from the other text. Kind of like this “Everything is Awesome“.

    I’ve constructed it in master slider like this. I have the first part of the sentence (that’s my special highlighted text) and the second half of the sentence is just normal. When I scale down my browser or test on a mobile device. The highlighted test breaks onto another line (not what I need to maintain the look I’d like).

    “Maybe I could use a css selector?” I thought. I don’t think that’s the answer because when I inspect the element, the padding/font size in relation to responsive qualities are within the plugin and would overwrite anything I put into my child theme.

    I tried writing a media query with in the specialized css style section of this plugin. That was a long shot, and didn’t end up working.

    Any thoughts for more troubleshooting?

    https://www.ads-software.com/plugins/master-slider/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author averta

    (@averta)

    Hi,
    First of all I have to say we need to have a look at your slider for better understanding but for now sine I do not know which text you are talking about the only thing I can say is I suggest you try to create its html and put it all there.
    Also media query could be very helpful here.

    Regards

    Please have a look at the Master Slider at the top of my page. If you look at it on a desktop, it’s perfect. If you look at it on a mobile phone, the text overwrites whatever is underneath it instead of making room. I am not sure how to fix this.

    https://weekendbroward.com/palm-beach-county-bars-restaurants/

    Yes, same problem here although I have already requested support for the same issue in another thread.

    I think that the problem can be solved if the slider switched from “Slider with Slide Info V2” to “Slider with slide Info” when on mobile. this way, both slider and text will show correctly.

    I have no big knowledge in css and php, but it could’ve been easy to apply custom style if “Style” of “Div” was included in main css.

    <div class="ms-slide-info ms-dir-v ms-align-right" style="right: -270px; width: 250px;">

    by overriding ms-dir-v ms-align-right and “Style” the slider can become better responsive on mobile. However, i do not know how to override the “Style” part of DIV. I think it is in php code ??

    Any help on the matter is highly appreciated

    Regards

    Ok, I came up with a hack that works to my liking on “Simple Slider with Slide Info V2”.
    it does as explained previously : change the layout of the slider on lower screen size devices.

    @media (max-width: 800px){
  .master-slider{
   	margin: 0px !important;
  }

  .ms-slide-info {
    margin-top: 10px;
    position: relative;
    min-height: 100px;
    width:100% !important;
    right:0px !important;
  }

  .ms-timerbar {
    position: relative;
  }
}

    This code have been tested with boxed layout only and not with full width slider.
    Hope it helps ??

    Regards

    Help please ??
    How do I get the image slider to appear full width with the text to appear under the image in mobile view?
    Check out the slider on this page in mobile version – https://studded.com.au/index.php/2015/09/29/252/#more-252.
    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Master Slider Responsive Text Issue’ is closed to new replies.