[stoneromeParticipant]

Using a Flex slider for a “tour” carousel on this page:

[http://klaprospect.wpengine.com/our-school/]

We have cropped all the images so that their height is 500px. Have tried putting in CSS similar to below so set the height, but the view port stretches the photos beyond their built-in width.

CSS to show all the images at their natural width on desktop (ranging anywhere from 300 to 800 pixels wide), and then keep their ratio when reduced for mobile?

.flex-viewport,.x-flexslider .x-slides img {
max-height: 500px;
margin-left: auto;
margin-right: auto;
}

[NicoModerator]

Hi There,

Thanks for writing in.

You can add this in your customizer’s custom CSS:

.x-flexslider .x-slides img{
    margin: 0 auto;
    width: 50%;
    max-height: 300px;
}

Adjust the numbers how you would want to achieve.

For the arrows adjustments,

.x-flexslider{
width:50%
}
.x-flexslider-shortcode-container .x-flexslider-shortcode{
    margin: 0 auto;
}

Hope it helps.

Let us know how it goes.

Thanks.

[stoneromeParticipant]

Thanks for this. We’re really still not getting the effect we’d like.

Before Cornerstone, there was a responsive lightbox. I’ve seen some old posts about that, but with them, it shows all of the gallery images on the page. Is there a way within Cornerstone to:

Have a slideshow (with or without nav) that opens up in a responsive lightbox after clicking on the first photo? The first photo (or any photo for that matter) is all that is visible on the page until it is clicked.

Thanks – Cory

[FriechModerator]

Hi Cory,

Unfortunately, we kind of stop improving the responsive lightbox shortcode and might not integrate with Cornerstone.

You might want to utilize the new extension Envira Gallery instead. It can be install under Addons > Extensions.

Hope it helps, Cheers!

[Author]

Posts