how do I prevent the slider image from being cropped at the bottom

  • I am trying to get the images in the slider to display without the bottom portion of them being cropped when the theme is resized.

    Below is what I worked that partially does what I want, but think it could be improved upon. it prevents cropping, but it also leaves space below the image when the browser window is narrower. Either way, its a start, maybe someone can improve upon where I am at now.

    .carousel-image img {
	max-width: 1200px !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.carousel .item {
    line-height: 500px;
    min-height: 500px;
    overflow: visible;
}
Viewing 5 replies - 1 through 5 (of 5 total)

  • why does it say 1200px? The best width is 1170px right?

    Link to your website?
    Where did you add this code?

    Thread Starter MC

    (@mcsolas)

    > Link to your website?
    The site I am working on currently has a coming soon page activated, thus its hard to link to a working example. We will be launching this week.

    > Where did you add this code?
    The code is in my child theme.

    > why does it say 1200px? The best width is 1170px right?
    I thought I saw 1200 in the theme docs, but I saw the 1170px width suggested in the forum, maybe this helps with that situation, I should try it.

    I will post the link to it when its live. the people are happy with the css mods I implemented in this post.. they really were upset about the clipping as they are making some pages with a single image collage at the top and you could only see about half the images in the bottom row when it was displaying full screen and sometimes when resized.

    I posted because I figured someone else had tried to mod the theme in this manner and was looking for general feedback on the subject. Thanks for taking a look at the thread.

    I added it in the custom .css It made my cropped picture going up a little bit, but still cropped…

    Thread Starter MC

    (@mcsolas)

    Hrmm.. works in my child theme. I am not using the custom css box that you inserted the code into. Maybe have to add some more !important declarations to it:

    .carousel .item {
    line-height: 500px !important;
    min-height: 500px !important;
    overflow: visible !important;
}

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how do I prevent the slider image from being cropped at the bottom’ is closed to new replies.