How to modify the slider and Image sizes?

Support
#1

Hello,

I have Themeco Pro which was used to develop my site, davidbergerhomes.com. I’m trying to figure out how to modify(reduce) the size of the slider a bit as it takes it a-lot of room on the page and in most browsers it is bigger then the window. How can I reduce the size of this slider using the Themeco Pro visual editor? I’m tried to poke around but could not see any area to change the size of the Content/Container/Column/Slider.

I have the same question on how to reduce the size of the picture on the About-Me page
http://davidbergerhomes.com/about-me

Your help is greatly appreciated!

Best,
David Berger

#2

Hi David,

For both situations, my opinion would be to edit the images in Photoshop or similar software and re-upload them.

That way you can control without extra code which exactly parts will be shown.

For the slider alternatively, you can add the following CSS to Cornerstone > CSS

.x-flexslider .x-slides .x-slide {
max-height: 400px;
}

Hope it helps!

#3

Hi Joao,

So I attempted to modify the image size and it did not change the actually size of the slider. After reducing the image size, the slider then expanded it to conform to the size of the slider which distorted the image.

I also attempted to add the code snippet you provided, which did change the size of the slide but in did not change the size of image found inside the slide. Although the slide height would get reduced the image would get cut wherever the re-sizing of the Slider area would get changed.

I guess a better question would be, when you setup a slider is there anyplace where you can state the size/dimensions of the slider? i.e. Section 2, Column 1/1 ? I don’t see anything like that… Slider settings?

Your help is greatly appreciated!

Best,
David Berger

#4

Hello David,

Thanks for updating in! Upon checking your site, I no longer see any slider on this page: http://davidbergerhomes.com/about-me. Did you happened to removed it? Please keep in mind that the slider depends on the width of the container and by default any image inside the slide, the width will be stretch out to 100% width of the slider. To prevent this to happen and let the image width display as is, you can make use of this code:

body .x-flexslider .x-slides img {
    min-width: 200px;
    max-width: 100%;
    width: initial !important;
    margin: 0 auto !important;
}

For more details about all the settings in the slider, you can check out the slider shortcode demo from here:
http://demo.theme.co/integrity-1/shortcodes/responsive-slider/

Hope this helps. Please let us know how it goes.

#5

Hi there,

I assume that you use the Slider Element in Cornerstone:

There is no option to explicitly set width and height but you can turn off the container option in the slider options to force it within the container:

Also, check the top section of the slider settings which you can click on column settings:

There you will be able to add padding at the left and right side of the slider:

Thank you.

#6

Hi ReueNel,

I will take a look at the information you provided to me. Meanwhile the slider only exists on www.davidbergerhomes.com the main page. Will get back to you after I read the info you provided.

Best,
David

#7

Hi Christopher,

This is great information, I was playing with the padding parameters and although it would reduce the size of the Slider itself, it didnt’ change/ auto-adjust the size of the pictures as it seems the pictures remained the size of Container/Column dims and would get cut off at whatever params I enter to try and reduce the size of the slider.

Best,
David

#8

Hello David,

Thanks for updating in! If you use code I’ve posted in my reply, you will have something like this:

And to eliminate the grey color, we need to make it white. You can update the code and make use of this instead:

body .x-flexslider .x-slides {
    background-color: #fff;
}

body .x-flexslider .x-slides img {
    min-width: 200px;
    max-width: 100%;
    width: initial !important;
    margin: 0 auto !important;
}

Hope this helps. Kindly let us know.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.