Responsive issues breaking site in mobile

  • Resolved kevinbrown360

    (@kevinbrown360)


    7 years, 8 months ago

    Slider looks great on desktop, but in mobile it’s not working correctly. I’m using the option of having text beside the image. In mobile it makes the image super small, and the text overlaps the content below the slider.

    Is there a way to move the text below the image on the mobile side? I found someone else say they duplicated the galleries and changed one set to have text under the image and created div tags to determine which gallery showed in mobile and which on desktop – but that is a temp fix and would not be reasonable for long term solution. From reading through the forum, it seams this is a very common issue with mobile. Is there a CSS fix, or is it something that will have to wait for a version upgrade?

    Any help would be much appreciated.

    Test site is at https://fergusondesign.com/test/portfolio/10×20-inline/

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

    (@averta_support)

    Hi,

    Please copy the below code to your 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%;
}

    Let me know the result.

    Best,
    Averta

    Thread Starter kevinbrown360

    (@kevinbrown360)

    That did the trick. I appreciate your fast response!

    Plugin Contributor averta support

    (@averta_support)

    Anytime!

    If you are satisfied with our product and services, we would greatly appreciate if you take a moment and give Master Slider a review.

    Have a great day!
    Averta

    Hi,

    Great slider, well done!

    However, I am having a similar problem where the slider looks great on my home page but on my mobile, it looks bad.

    please take a look at https://www.omeidachinese.com

    I tried the code suggestion, makes it worse

    The text is too small and the button useless and I can not hide separate elements

    I am also receiving a message on Google speed insights to include the .js in my HTML file to make it smaller but I am clueless with the details.

    Thanks in advance!

    Plugin Contributor averta support

    (@averta_support)

    Hi @omeida,

    Unfortunately, we cannot assist our pro users here. Please ask your questions on our Master Slider Pro support center:

    https://support.averta.net/en/item/master-slider-wordpress-plugin/
    Registration: https://support.averta.net/en/login/

    Our support staff are there to provide you with the best possible assistance, as soon as possible.

    If you need any further information, please let me know.

    Best,
    Averta

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive issues breaking site in mobile’ is closed to new replies.

Tags