Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • April 2, 2020 at 12:43 am #1199913
    designyvr

    Hi,

    For the Full Screen Slider for the desktop view, I’d like to include the captions without the frames.

    In the mobile view, the caption text is harder to read against the background image.

    How can I add frames (background color) for both the Caption Title and Caption Text for the mobile view only?

    Thank you!

    April 2, 2020 at 2:05 am #1199920
    Jordan Shannon

    Hey designyvr,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    April 2, 2020 at 2:14 am #1199925
    designyvr

    See below for the info. Thank you!

    April 2, 2020 at 2:14 am #1199926
    designyvr

    The Full Screen Slider is on the Home page.

    April 2, 2020 at 4:35 pm #1200221
    Jordan Shannon

    Hi,

    The wp-admin info provided did not work for me. Can you test again?

    Best regards,
    Jordan Shannon

    April 2, 2020 at 7:02 pm #1200270
    designyvr

    Sorry about that, please try again with the same login info!

    April 3, 2020 at 10:17 am #1200431
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.home #fullscreen_slider_1 .avia-caption-title, .home #fullscreen_slider_1 .avia-caption-content, .home #fullscreen_slider_1 .avia-slideshow-button {
    background:rgba(255,255,255,0.5);
}
}

    Best regards,
    Rikard

    April 3, 2020 at 8:17 pm #1200604
    designyvr

    You’re the best Rikard!! Thank you so much for your advice!

    This works great and I’m wondering if you might be able to advise on 2 other items for the mobile view of this full screen slider. I’ve added your CSS and have made some adjustments.

    It it possible to:

    – Combine the Caption Title and Caption Text so it appears to be one box?

    – Vertical align the Caption Title, Caption Text and button so that its positioned at the bottom of the slider (so it doesn’t cover the subject in the slider photo)?

    Thank you very much, I appreciate it!

    April 5, 2020 at 4:59 am #1200911
    Rikard

    Hi,

    Please try this as well in order to combine the two boxes:

    @media only screen and (max-width: 767px) {
.home #fullscreen_slider_1 .avia-caption-title {
    margin-bottom: 0;
}
}

    I’m not sure I understand what you mean about the bottom alignment though, since the button is at the bottom?

    Best regards,
    Rikard

    April 5, 2020 at 8:23 pm #1201001
    designyvr

    Hi Rikard,

    Thank you very much!

    I’ve added and adjusted your CSS further. It is it possible to remove the gap between the caption title and caption text so that it appears to be one text box, instead of 2 text boxes?

    By bottom alignment, is it possible to have the whole block (caption title, caption text, and the button) be situated at the bottom of the slider instead of vertically centered, so it covers less of the person in the photos?

    Thank you!

    April 7, 2020 at 3:42 am #1201425
    Rikard

    Hi,

    Thanks for the update. Please try this as well to see if you have any luck with it:

    @media only screen and (max-width: 767px) {
.slideshow_align_caption {
    vertical-align: bottom;
}
}

    Best regards,
    Rikard

    April 7, 2020 at 7:12 pm #1201682
    designyvr

    Hi Rikard,

    Thank you for your support, this works great!!

    I have one other question noted above, could you please comment?

    On the same page, is it possible to combine the Caption Title and Caption Text so it appears to be one box?

    I’ve included image links below showing what I mean.

    I appreciate your advice. Thank you Rikard!!

    April 7, 2020 at 7:22 pm #1201685
    designyvr

    My apologies Rikard, I just noticed that you had posted about my last request earlier in this thread. I tried out the CSS as you described; so far it’s not working.

    @media only screen and (max-width: 767px) {
    .home #fullscreen_slider_1 .avia-caption-title {
    margin-bottom: 0;
    }
    }

    I also tried adding !important and for the .avia-caption-text, setting the margin-top to 0, but that is not working either. Any advice?

    Thank you very much!

    April 8, 2020 at 11:56 am #1201878
    Rikard

    Hi,

    Thanks for the update. Please try this CSS instead:

    @media only screen and (max-width: 767px) {
.home .avia-caption-content {
  margin-top: -15px !important;
}
}

    Best regards,
    Rikard

    April 8, 2020 at 8:34 pm #1202009
    designyvr

    Perfect! Thank you Rikard, you guys provide the best support!

    April 9, 2020 at 1:02 am #1202069
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    April 9, 2020 at 1:25 am #1202079
    designyvr

    Hi Jordan, You can can close this thread, thank you!

    April 9, 2020 at 1:39 am #1202094
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Fullscreen Slider – Add caption frame for the mobile view’ is closed to new replies.