Forums

Image slider problems in Elemental

Permalink
Hi,

I'm having problem with the image slider. It resizes my images or makes them too big. Is there a specific image size that has to be used?
 
tallacman replied on at Permalink Reply
tallacman
your image should be wide enough to fill the area width-wise. If not the css may stretch the image to try to make it look normal. 1100 px should be good.
ob7dev replied on at Permalink Reply
ob7dev
Can you post screenshots?
cvtgorg replied on at Permalink Reply
I have a similar problem. I don't want the css to stretch my images, just leave them at the original size (450w, 450h). Is there custom css I can define to disable image stretching? Is there a better slider that allows this?

I tried to drag the slider into Column1 but the photos still stretch to fill the whole screen. :-(
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi cvtgorg,

The CSS for the core Image Slider block is in image-slider.less.
elemental\css\build\blocks\image-slider.less

It is not recommended to change files in the core, so using Cloneamental is recommended.
https://www.concrete5.org/marketplace/themes/cloneamental...
mafsusa replied on at Permalink Reply 1 Attachment
I have the same problem. I use the Elemental template. I have a left column set up. When I add the slide into the main area, the pictures I put in there are huge! I tried to resize the jpg's to 300x150 and it still stretches it to bigger than my screen.
Attached is a screenshot
cvtgorg replied on at Permalink Reply
I switched to using the free Cycle 2 Slide Show. Behaves the way I need it.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@mafsusa

When using the Elemental theme, you can use this CSS to add the Image Slider block to the Main area in the Left Sidebar page template:
@media (min-width: 768px) {
    div.ccm-page.page-template-left-sidebar .col-content .ccm-image-slider-container.ccm-block-image-slider-arrows .ccm-image-slider {
        max-width: 656px;
    }
}
@media (min-width: 992px) {
    div.ccm-page.page-template-left-sidebar .col-content .ccm-image-slider-container.ccm-block-image-slider-arrows .ccm-image-slider {
        max-width: 616px;
    }
}
@media (min-width: 1200px) {
    div.ccm-page.page-template-left-sidebar .col-content .ccm-image-slider-container.ccm-block-image-slider-arrows .ccm-image-slider {
        max-width: 750px;
    }
}
Viewing 15 lines of 26 lines. View entire code block.

The CSS can be added to your site Custom CSS.
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button