Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #217229

    Hi, one reason we choose the Incarnation theme is because it is mobile responsive. However, the captions on our home page slider do not show properly on mobile. I’ve tried different options and none appear to be ideal. If I choose center without frame, then the caption shows on mobile (if I include the caption text with the caption title) but the button with a call to action does not show at all.

    See http://www.prayerthatheals.org/blog/ slider at the top.

    Thanks for your help with this. I’m presenting this site on Saturday to a large group of people. I’m hoping there will be a quick fix.

    Tina

    #217273

    Hi tinareejohnson!

    You can add this on Quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive #main .featured_caption, .responsive #main .caption-slideshow-button {
    display: block;
    }
    
    .responsive #top .slideshow_caption h1 {
    font-size: 12px;
    line-height: 1.3em;
    top: -20px;
    }
    }

    Cheers!
    Ismael

    #217626

    Hello, Ismael. Appreciate the quick response. We made this change, however, we still have the same problem with the captions not showing. For example, on one slider the caption is: Sunday School – Grads share their thoughts [Watch Video] and all that shows now is “Video” (The caption text is in the appropriate field. I had the caption and text in the caption field and doesn’t seem to help.)

    If you go to the home page on mobile you will see the problem. http://www.prayerthatheals.org/blog/ It views fine on the desktop and tablet.

    Please help,
    Tina

    #218776

    Hi!

    Please add following code to Quick CSS in Incarnation theme options under Styling tab

    @media only screen and (max-width: 480px) {
    div .slideshow .slideshow_caption {
    width: 80%;
    bottom: 0%;
    left: 0;
    }
    .responsive #top .caption_framed .slideshow_caption .slideshow_inner_caption {
    padding: 0;
    }
    .slideshow_align_caption {
    padding: 15px; }
    #top #wrap_all .button_wrap_1 .caption-slideshow-button {
    width: 50%;
    margin: 0;
    font-size: 11px;
    }
    #top .slideshow_caption .button_wrap {
    padding-top: 0; }
    .responsive #top .slideshow_caption h1 {
    top: auto; }}

    Regards,
    Yigit

    #219719

    Thank you Yigit, for your response. We changed the code as you suggested. The caption title now shows on the Samsung Galaxy S4, but the caption text and call to action button don’t show at all. We have tried moving the text into the caption title field, and also tried changing the placement of the captions on the sliders. We are making minor adjustments to no avail.

    We appreciate any help with this issue.

    Tina

    #220505

    Hey!

    The captions are meant to be hidden on mobile because the image container gets so small you can no longer see the image through the captions (typically).

    Showing them is never ideal but you can do so with:

    
    
    .responsive #main .featured_caption, .responsive #main .caption-slideshow-button {
    display: block !important;
    }
    

    Cheers!
    Devin

    #222422

    Thanks, Devin! I think this is the best option because the button and call to action show. An option is to duplicate the caption wording directly on the image (at least for the larger screens).

    Have a great day.

    <Clinking glasses>

    Tina

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Incarnation – Slider Button & Captions on Mobile’ is closed to new replies.