Forums

Set minimum slider height

Permalink
Hi everyone
Is there a way to set a minimum height to the buit-in slider block, so it doesn't scale that far down on sm-screens? I.e. to obtain a min-height of 300px ...
Thanks for your suggestions.
pixeljunkie
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi pixeljunkie,

You can try this:
.rslides {
    min-height: 400px;
}

For it to look right, the images used should have similar height and width proportions.
pixeljunkie replied on at Permalink Reply
pixeljunkie
Hi
Sorry, but this simply makes the container render to the desired height. Not the image :(
Any other suggestions?
MrKDilkington replied on at Permalink Reply
MrKDilkington
I don't believe targeting the img itself will work. Increasing the image height will distort the image. The image is being sized to width 100%, height auto, and display block to proportionally fit its container.

If you don't mind the slider potentially changing size between slides. You can target the li parent of image using the CSS used in the Elemental theme.
div.ccm-page .ccm-image-slider-container .ccm-image-slider .rslides li {
  max-height: 300px;
}
@media (min-width: 480px) and (max-width: 767px) {
    div.ccm-page .ccm-image-slider-container .ccm-image-slider .rslides li {
        max-height: 320px;
    }
}
@media (min-width: 768px) {
    div.ccm-page .ccm-image-slider-container .ccm-image-slider .rslides li {
        max-height: 350px;
    }
}
@media (min-width: 992px) {
    div.ccm-page .ccm-image-slider-container .ccm-image-slider .rslides li {
Viewing 15 lines of 23 lines. View entire code block.
pixeljunkie replied on at Permalink Reply
pixeljunkie
I found a solution:
I added 
@media screen and (max-width: 768px) {
.rslides img {
    border: 0 none;
    display: block;
    float: left;
    height: auto;
    max-height: 350px;
    width: auto;
    }
}


to the templates view.css and now it keeps the desired height. Thanks for your help!
section1 replied on at Permalink Reply
Can you please write the exact path to this script so I can make some changes to the height. I have been at this for the last two weeks trying to find that file.
pixeljunkie replied on at Permalink Reply
pixeljunkie
Hi section1

Create a custom template for the image slider. Add this media query in the view.css included. However, there is one issue to this approach: The image will remain fix, means that the left parts are simply cut, thus potentially affecting the visual language in portrait view.

Maybe someone has a solution to this ....
section1 replied on at Permalink Reply
that code that is written I have found it but it's only a part of it as the one shown on this site is far more extensive than in the template. I believe if I can only find the part where it say's width 1100 height 480px I can change the height and problem solved. I've tried playing around with the pic size but it just won't do. I've never understood these things why these image sliders weren't made dynamic that one could upload a pic and it would accommodate itself to suit.