Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 22, 2015 at 3:20 pm #507109
    Munford

    Hi
    I am working on the slideshow styling for some fullscreen easy sliders on my site (see link below) I have a couple questions:

    1. I am trying to decrease the spaces between the title and caption and the caption and button by using a line-height setting – did not work. ?

    2. I need to hide the slideshow captions on mobile devices – tried this:
    @media only screen and (max-width: 767px) {
    .responsive #top .slideshow_caption .featured_caption {
    display: none !important;
    }}
    but it is not working. ??

    3. I also would like to hide captions on images on the entire site on mobile devices…?

    thanks so much
    Nancy

    • This topic was modified 9 years, 1 month ago by Munford.
    September 22, 2015 at 5:50 pm #507262
    Dake

    Hi Munford!

    Have the styles that aren’t working been removed?

    May we have temporary access to your website so we can take a closer look?

    We need to see

    Cheers!
    Dake

    September 22, 2015 at 6:07 pm #507276
    Munford

    Hi Dake
    yes the hide slideshow stylings are still there
    I don’t think the line height setting is right but I couldn’t target the caption…

    Is there an easy way to clean up my css? I always seem to have 100s of lines of code, but not sure how to best organize it…
    thanks for your help
    Nancy

    September 22, 2015 at 7:50 pm #507316
    Dake

    Hey!

    Please remove any instances of caption css that hasn’t worked, so I can neatly implement css without possible conflicts.

    It’s usually best to organize your css by grouping each to a specific hierachy/category.

    I see that you are also using short descriptions or comments to indicate what each section of css affects.

    Cheers!
    Dake

    September 22, 2015 at 10:27 pm #507399
    Munford

    Hi Dake
    I have moved all the caption styling to the top of my quick css.
    thanks for taking a look
    Nancy

    September 23, 2015 at 5:27 am #507459
    Ismael

    Hey!

    Thank you for the update. Let me inform you that Dake will be unavailable this time so, if you don’t mind, I will be the one handling your requests for now.

    1.) Use this to create more space between the caption title and caption:

    .avia-caption-title {
    margin-bottom: 20px;
}

    2.) We modified the css code for the caption:

    /*hide slideshow captions mobile*/
@media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption {
display: none !important;
}
}

    3.) For image caption overlay, use this:

    .av-image-caption-overlay-center {
    display: none;
}

    You can include that css declaration inside the css media query above.

    Cheers!
    Ismael

    September 23, 2015 at 9:59 am #507568
    Munford

    Hi Ismael.

    Thanks for the help.
    In regards to 1) above, I am trying to decrease the spaces between the title and caption and the caption and button…?
    the other codes worked great – thanks!
    Nancy

    September 23, 2015 at 12:44 pm #507691
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .slideshow_caption a, .slideshow_caption div p, .slideshow_caption h2 {
    margin-bottom: 20px!important;
}

    Regards,
    Yigit

    September 23, 2015 at 1:12 pm #507704
    Munford

    thanks everyone – I got it looking right now

    regards
    Nancy

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘slideshow caption styling’ is closed to new replies.