Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 10, 2013 at 10:21 pm #173837
    mattock

    Hi, I wondered if you could help me with the full width easy slider.
    I’ve set it up and chosen Featured 1500 x 430 stretched. This looks good but the slider changes height when it moves to the next image which looks bad.

    Is there a way to force a height and keep it at that height and it just crops the image height (not width)?
    the “Entry without sidebar” option seems to work ok, but the height is way to tall.

    Also how can I changed the height of the slider, Id like it a bit shorter, many thanks

    October 11, 2013 at 6:14 am #174014
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    October 11, 2013 at 2:23 pm #174147
    mattock

    Hi Josue, the page in question is http://www.dev.davidmattock.co.uk/about-me/
    you’ll see when it slides to the second image the height grows

    Do I have to use images that all have exactly the same dimensions set already? I was hoping the slider would just crop the height for me,
    many thanks

    October 11, 2013 at 7:49 pm #174357
    Josue

    Hello!

    Try adding this code to the Quick CSS:

    .avia-slideshow-inner {
height: 523px !important;
}

    Regards,
    Josue

    October 11, 2013 at 9:27 pm #174382
    mattock

    cheers that works perfectly ! I wanted it a bit thinner so set it to 350 px
    one more thing, when the screen is a full width on the captions are right on the bottom of the images, and also the images are aligned to the top so you see the top, is there a way of setting it all to vertical align center ? or moving the captions up at least

    When I shrink the window in width the captions then move to the center of the slider images vertically.
    I tried looking at inspect element in chrome but could find the correct style to adjust for this sorry

    Thanks again for the speedy support

    October 12, 2013 at 12:39 am #174413
    Josue

    Hey!

    Have you tried setting Top as 50% in the Styling tab of that Layer:

    Best regards,
    Josue

    October 12, 2013 at 1:14 am #174427
    mattock

    Hey, sorry but I don’t have those options with the full width easy slider, that’s only in the advanced layer slider?

    October 12, 2013 at 1:28 am #174430
    Josue

    Oh, i though you were using LayerSlider, anyways, i tested with this and it appears to work to center the caption.

    .caption_container{
height: 350px !important;
}

    Remember that if you want to change the height of your slider you’d need to change it here too.

    Cheers!
    Josue

    October 12, 2013 at 2:01 am #174435
    mattock

    Genius thanks !
    Only thing now I’ve noticed this slider does not work well in responsive, when I shrink the browser window width or check on my phone the captions jump outside and below the images?

    Without this code change the captions stay on the image but completely cover them when its phone size. Is there a way to turn the captions off when it gets to a certain size, or shrink the captions ?

    This happens with or without the code change: the line with the little dots you can press to change the slider image goes way below, it doesn’t seem to stay tight below the images
    Thanks again for all the help

    October 12, 2013 at 2:18 am #174437
    Josue

    Hello!

    You can specify a different height for desktop and mobile view here, inside those sections already created:

    Regards,
    Josue

    October 12, 2013 at 2:51 am #174443
    mattock

    ah that’s awesome, sorry I didn’t realise that. Works much better now.

    One last question, how would I make the font smaller or not even visible just for mobile phones as the captions pretty much covers the image when viewed on a phone, thank you (not ipads this size will be fine)

    I tried adding
    .avia-caption-title h2 {
    font-size: 10px;
    }

    but didn’t work, my knowledge is limited on this sorry, cheers

    October 12, 2013 at 3:01 am #174445
    Josue

    Hello!

    Something like this will do it:

    .slideshow_caption{
display: none;
}

    Inside the mobile block.

    Best regards,
    Josue

    October 12, 2013 at 3:09 am #174447
    mattock

    perfect thanks, this may make the caption invisible on ipads as well, I’m not sure as I don’t have one, but I can live with that, huge thanks again

    October 12, 2013 at 3:22 am #174452
    Josue

    You are welcome, glad i could help Mike.

    Regards,
    
Josue

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Full width easy slider constant height’ is closed to new replies.