Okay
  Public Ticket #600074
No slider text/link( button read more) on mobile
Closed

Comments

  • tom started the conversation
    December 2, 2015 at 6:55am

    Hi, when I am viewing my site on my phone there is no text on the slider and no READ MORE link. Is there a workaround for this, am I missing a setting somewhere ? It is very strange . i understand that all text on mobile device could be hard to see it , but this just one button with READ MORE should be there . My slider link read more is an important part of my site. All I know is I can go APPEARANCE/EDITOR/EDIT THEMES fineliner:stylesheet(style.css)

    And what should I change to make appear button ? I am very week in css , Could you help me , please .

    Thanks




  •  291
    Paul replied
    December 2, 2015 at 8:01am

    Hi Tom!

    To display only the button on the slider caption area when viewing on a small viewport, please try using this custom CSS:

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

    #home-slider-container .slider-caption {
        display: block;
    }

    #home-slider-container .slider-caption .caption-title,
    #home-slider-container .slider-caption .caption-body > p {
        display: none;
    }

    #home-slider-container .slider-caption {
        text-align: center;
    }

}

    Hope this helps!

    P.S. You can also see a tip here for more info on how to adjust the elements on various resolutions: https://uxbarn.ticksy.com/article/2591/

    Regards,
    Paul

  • tom replied
    December 3, 2015 at 6:46am

    Hi Paul thanks for help , I am almost at home . Thre is only one thing to fix . Button on the slider caption area is now too big ( mobile device ) . Making half size is what I am looking for , The butom will be esthetic and still very well visable . I will be very appreciate for help I searched 30 pages and did not find the answear . I hope this topic will be helpful for other . I atached picture how is it look now .

    Thanks Paul again for your help

    This is exacly what I paste in custom css :

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

    #home-slider-container .slider-caption {
    display: block;
    }

    #home-slider-container .slider-caption .caption-title,
    #home-slider-container .slider-caption .caption-body > p {
    display: none;
    }

    #home-slider-container .slider-caption {
    text-align: center;width: 250px;
    }

    }

    .slider-caption {

    width: 490px;

    }

    I added from myself :

    .slider-caption { width: 490px; } to make longer slider caption button( orginal is very short )

    and

    width: 250px; for @media



  •  291
    Paul replied
    December 3, 2015 at 8:39am

    Please try adding this to make the button smaller on small viewport devices:

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

    #root-container .home-slider-item .button {
        font-size: 11px;
        padding: 8px 15px;
    }

}

    You can adjust the font-size and padding here.