Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 2, 2015 at 8:43 pm #497363
    Julie

    I’m having some issues with the location of captions in the Full-Width Easy Slider on my mobile phone.
    I adjusted the bottom caption to move it up on the page, and it’s great on a regular screen, but on mobile, it is covering up the images and because there is text in them on white background and the text itself is white or light blue, it is a problem.
    I have adjusted the height of the slider on mobile to 175px using code from another thread, so it shows more of the info, but I can’t make it too high without skewing the images, which doesn’t look very good.

    If I could bump the captions back toward the left, that might help– it looks like there is room to possibly do that. I just need to accommodate 3-4 letters @ size 30px to get them out of the way in landscape view at least.

    Another option (which is actually what I would have preferred in the first place) would be to have the captions top center so they appear above the images (I can adjust the images to move the content down)– but I did not know how to do that.

    Yet another option might be to have the caption box appear on mobile only to set the text apart, but that is not a great option because it will cover the text in the images.

    Another thing I would love to fix if it is possible is to have the caption appear faster– theoretically, it would be great if they appeared before the image, or at least at almost the same time, since they provide the context for them.

    If I can’t work this all out, I could always put the text on the images themselves and not use the captions, but I do like the animation and it looks crisper in captions than on the image. Or I could figure out the LayerSlider, but that will take a lot of time. I would rather use this one if I can work these issues out.

    Can you help with this?

    Thanks in advance for any help/suggestions!

    September 3, 2015 at 3:54 pm #497718
    Andy

    Hey splashmediallc!

    can you provide us a mockup of the things you want to achieve? quite difficult to understand what you are trying to do.

    You can move the captions up with this code in Quick CSS field:

    @media only screen and (max-device-width: 736px) 
.caption_fullwidth.av-slideshow-caption.caption_bottom {
top: -120px;
}
move slider down with this:
div#full_slider_1 {
top: 75px;
margin-bottom: 40px;
}

    Cheers!
    Andy

    September 3, 2015 at 6:17 pm #497879
    Julie

    Hi Andy,

    Sorry for the confusion. I am trying to figure out the best way to achieve the result I am looking for.

    After adjusting the layout of the image, here is the code that looks good:
    .caption_center .slideshow_caption {
    top: -160px !important;
    bottom: auto !important;
    }

    Link to screenshot is below.

    But if I change position for all slides, my text-only slides are off. Is it possible to have the caption position change for each individual slide? Can I specify that changes should only apply to the slideshow on this one page (the home page)?

    One other issue: when it is at the top, the caption does not appear at all on my mobile. Is it possible to change the caption position only for mobile views? Can this also be done for mobile views of individual slides?

    Last question: Is there a way to have the navigation dots in the default view be white hollow circles like in the minimal view instead of black filled?

    Thank you so much for your help!

    September 3, 2015 at 11:09 pm #498048
    Julie

    To make it simpler:

    Code to adjust positioning of bottom caption on the site in general is
    .caption_bottom .slideshow_caption {
    top: 225px !important; left: -25px !important;
    bottom: auto !important;
    }

    Code adjusting caption positioning on wide view of mobile phone is
    @media only screen and (max-width: 767px) {.caption_bottom .slideshow_caption {
    top: 165px !important; left: -50px !important;
    bottom: auto !important;
    }}

    Those views are perfect.
    The only remaining problem is the narrow (portrait) view. How can I control the placement of the caption text separate from the caption title, so I can put the title up toward the top of the slider, and the text down toward the bottom?

    Hopefully that will be easier.

    I would also still like to know if I can change the navigation dots to white circles instead of black filled.

    Thanks!

    September 7, 2015 at 1:25 pm #499207
    Andy

    Hey!

    still quite confused and not sure what you are trying to achieve. Basically do you want to position your slideshow captions above your illustrations? if yes use this code: 

    .slideshow_align_caption {
top: -126px;
left: 500px;
}

    Then you need to adjust the slideshow image you are using, so captions and illustrations don’t overlap each other.

    Regards,
    Andy

    September 7, 2015 at 1:29 pm #499211
    Andy

    Hi!

    for your slideshow dots use this code:

    .avia-slideshow-dots a {
border: 2px solid black;
background-color: white;
}

    Regards,
    Andy

    September 7, 2015 at 4:44 pm #499369
    Julie

    Can I control the caption title and caption text separately? I would like to move caption titles (which are only a few words on one line) to the top of the screen and caption text (which is a little longer) to the bottom.

    September 8, 2015 at 5:09 am #499647
    Ismael

    Hi!

    Use this css selector for the title:

    .responsive #top .slideshow_caption h2

    … and this one for the actual caption:

    .responsive #top .slideshow_caption .avia-caption-content

    Best regards,
    Ismael

    September 8, 2015 at 6:07 pm #500047
    Julie

    Hi Ishmael,

    Thank you for the info, but that does not seem to affect placement. I adjusted settings on bottom caption placement to get it up toward the top with this on all screens:
    .caption_bottom .slideshow_caption {
    top: 225px !important; left: -25px !important;
    bottom: auto !important;
    }

    So the following moves it up farther on mobile portrait view:
    @media only screen and (max-width: 480px) {.caption_bottom .slideshow_caption {
    top: 105px !important; left: -50px !important;
    bottom: auto !important;
    }}

    Is there another bit to add just to move just the bottom caption (but not the caption title) down? The top is perfect where it is, I just need to move the bottom text down.

    Thanks for any help you can give.

    Thanks very much for your help.

    September 9, 2015 at 12:49 pm #500345
    Andy

    Hi!

    use this code:

    .avia-caption-content.av_inherit_color {
position: relative;
top: 15px;
}

    and adjust as needed.

    Cheers!
    Andy

    September 9, 2015 at 1:26 pm #500375
    Julie

    Perfect– thank you so much!

    Last request: how can I apply this change only to slides 3, 4 and 5 on the home page?

    September 10, 2015 at 5:56 am #500810
    Rikard

    Hi,

    Please try the following instead:

    .home .slide-3 .avia-caption-content.av_inherit_color, .home .slide-4 .avia-caption-content.av_inherit_color, .home .slide-5 .avia-caption-content.av_inherit_color {
position: relative;
top: 15px;
}

    Best regards,
    Rikard

    October 25, 2015 at 8:53 pm #524484
    Julie

    This works perfectly. Thank you so much for your help!

    October 25, 2015 at 11:13 pm #524544
    Dake

    Hey!

    Glad to know we could help :)

    Please let us know if you ever need any help in the future.

    Best regards,
    Dake

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Full-Width Easy Slider caption location/appearance on mobile’ is closed to new replies.