Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 17, 2017 at 4:28 pm #794948
    EventLawyers

    hello,

    first of all – i love using your theme.

    But I have a small but annoying problem:
    The caption text on the full width slider is not fully responsive. It displays over the whole images when displayed on mobile devices…

    Do you have any solution for it? I would like it to look like it look on all the other devices

    Thanks!

    May 18, 2017 at 7:26 am #795281
    Rikard

    Hey EventLawyers,

    Responsive mean that it adapts to the screen size, not to the background image. What changes would you like to make?

    Best regards,
    Rikard

    May 18, 2017 at 9:21 am #795713
    EventLawyers

    Hey Rikard,

    I want it to adapt to the background image, but only when using on Smartphones. I think it works for tablets but smartphone looks weird because you can’t really see the picture below.

    Best,
    Anna

    May 18, 2017 at 12:27 pm #795835
    Rikard

    Hi,

    I would recommend that you hide the slider caption for mobile screens, then add a section under the slider with the same text, which will only be visible for mobile. Would that be an option for you?

    Best regards,
    Rikard

    May 18, 2017 at 3:12 pm #795932
    EventLawyers

    That would be ok, but not my preferred option. Where can i hide the captions for mobile screens?

    Best regards,
    Anna

    May 18, 2017 at 8:38 pm #796142
    Victoria

    Hi Anna,

    Here is a bit different solution:

    
@media only screen and (max-width: 767px) {
  .caption_bottom .slideshow_caption .slideshow_inner_caption, 
.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .responsive #top .slideshow_caption .avia-caption-content {
    font-size: 17px !important;
}
}
@media only screen and (max-width: 479px) {
  .responsive #top .slideshow_caption .avia-caption-content {
    font-size: 13px !important;
}
}

    Let us know how it works for you.
    Best regards,
    Victoria

    May 19, 2017 at 9:57 am #796437
    EventLawyers

    Hi Victoria,

    your code works perfect for the picture on the HOME site but unfortunately not on the image slideshow I used. Is there any solution for that problem?

    Thank you so much for your awesome support!

    Best regards,
    Anna

    May 19, 2017 at 10:30 am #796455
    Victoria

    Hi Anna,

    Where is the other slider that need to be adjusted?

    Best regards,
    Victoria

    May 19, 2017 at 10:31 am #796459
    EventLawyers

    Hi Victoria,

    Link is in private content.
    Thank you :)

    Best,
    Anna

    May 22, 2017 at 6:57 am #797415
    Ismael

    Hi,

    Thank you for the info.

    Aside from adjusting the caption, you can also increase the height of the slider on mobile view and create more space for the caption.

    @media only screen and (max-width: 767px) {
    .avia-slideshow-inner, .avia-slideshow-inner img {
        height: 400px !important;
    }

    .avia-slideshow-inner img {
        min-width: 800px !important;
    }
}

    Best regards,
    Ismael

    May 22, 2017 at 9:10 am #797475
    EventLawyers

    Hi Ismael,

    this code is not working for me…
    Is there any possibility to get the same effect on the slideshow as on HOME site? The code from Victoria worked perfect there but unfortunately not on the slider.

    appreciate your help a lot! :)

    Best,
    Anna

    May 23, 2017 at 4:54 am #798037
    Ismael

    Hi,

    Did you remove the browser cache or hard refresh before checking the page? Please try the following css codes.

    @media only screen and (max-width: 479px) {
    .responsive #top .slideshow_caption h2 {
        font-size: 13px !important;
    }

    .avia-caption-content p {
        font-size: 11px !important;
    }

    #top .avia-slideshow-button {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
}

    Best regards,
    Ismael

    May 23, 2017 at 11:20 am #798177
    EventLawyers

    Hi Ismael,

    so the fonts are a lot smaller now! Looks way better!
    But I have a button on the first slide, which isn’t getting smaller. And is there any possibility to adjust the grey background of the caption to the font size?

    I’m really thankful for you great support!

    Best,
    Anna

    May 24, 2017 at 3:33 pm #798966
    Ismael

    Hi,

    We added a css modification inside the code above. Please try it again.

    Best regards,
    Ismael

    May 29, 2017 at 7:32 am #800955
    EventLawyers

    It works perfect! :) Thank you so much for your amazing support! :)

    May 29, 2017 at 11:07 am #800990
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    May 29, 2017 at 11:46 am #801007
    EventLawyers

    Hey,

    you can close the topic. Thanks!

    Best regards,
    Anna

    May 30, 2017 at 3:59 am #801333
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Caption Text full width slider not responsive’ is closed to new replies.