› ›

Mobile Slider too Small/ Thin

chris72chris72
edited August 2017 in Appointment Theme
When i check my website on my mobile device (vertical view), the slider doesn't seem to be responsive. It looks too thin and the content (text) seems to be cut. My website url is: http://www.verlaagdplafondplaatsen.nl/
How can this be fixed?
I have added a screenshot.
Tagged:

Comments

  • abhishekabhishek
    Hi chris72,

     we have checked your site. 
    There is long text in your slider and you slider image is small in height. So please upload your slider image large in width and height (1600*550)

    Let me know did it work.

    Thanks
    A
  • chris72chris72
    edited August 2017
    Thanks for the tip Ab.
    I have uploaded 1600x550 slides and only the first slide seems to be a little bit better, but not as it should be.
    P.S. I have only edited the original appointment theme pro text and changed the image on my website. The slider-text on my website is not even longer then on the appointment theme demo.
  • abhishekabhishek
    Hi 

    Gald to know that.

    Please use large slider image for all slide and also use this given css code in your theme custom CSS box.

    Wp-dashboard >> Appreance >> customize >> header settings >> custom css box

    @media only screen and (max-width: 480px) and (min-width: 200px) {
    .slide-text-bg1 { margin: 0 0 3px; }
    .slide-text-bg2 { width: 100%; margin: 0px; }
    .slide-text-bg1 h2 { font-size: 11px; line-height: 16px; padding: 1px 6px; }
    }

    Thanks
    A
  • chris72chris72
    edited August 2017
    I have done that and nothing changes.
    In slide 2 i have a video and text. On my smartphone only the (youtube) video is visible, no text and no button.
    In slide 3 i only have text (quote) and it appears much too big on my smartphone (vertical view). The letters appear much too big. On the horizontal view it looks ok.
  • abhishekabhishek
    Hi 

    Please also use below-given cs code to show your text and video on on mobile. and also for Quote format

    @media only screen and (max-width: 767px) and (min-width: 200px) {
       .col-md-6 { width: 50%; float: left; }
        .video-frame { margin: 0 !important; width: 100% !important; }
        .video-content { display: block !important; }
        .format-video h1 { font-size: 16px; line-height: 20px; padding: 0 0 5px; }
        .format-video p { font-size: 10px; line-height: 16px; }
        .format-video-btn-sm { font-size: 9px; line-height: 15px; padding: 4px 12px; margin: 5px 0 5px; }
    .format-quote { padding: 7px 7px; }
    .format-quote p { font-size: 10px; line-height: 16px; }
    format-quote small { font-size: 9px; line-height: 18px; }
    }
    @media only screen and (max-width: 500px) and (min-width: 200px) {
        .format-video h1 { font-size: 10px; line-height: 15px; padding: 0 0 3px; }
        .format-video p { font-size: 7px; line-height: 12px; padding: 2px 4px; }
        .format-video-btn-sm { font-size: 7px; line-height: 12px; padding: 2px 6px; margin: 0; }
    }

    Here is the screenshot of your video slide http://prntscr.com/gbyg02

    If also its not working kindly upload more large image in height and width.

    Thanks
    A
  • chris72chris72
    Now the slides look much better. Thank you very much. This may come handy for the other people, too :)
    You may close the topic.
  • abhishekabhishek
    Hi 

    Glad to know that if you like our theme and support can i ask your for a good review here https://wordpress.org/support/theme/appointment/reviews/?filter=5

    Let me know if you have any other questtions.

    Thanks
    A
This discussion has been closed.