carolineschnapp
5/4/2015 - 10:47 PM

Reduce the width of the slideshow by 50% and center it in the desktop view. #slideshow #flexslider

Reduce the width of the slideshow by 50% and center it in the desktop view. #slideshow #flexslider

slider.liquid
content_copyfile_download
<div class="flexslider large--one-half" id="heroSlider" style="margin-left: auto; margin-right: auto;" data-auto="{{ settings.slider_home_auto }}" data-rate="{{ settings.slider_home_rate }}">
instructions.md
content_copyfile_download
  • Rendered
  • Source

Problem

Your slideshow is too big, and you need to scroll down quite a lot to see the content below. Ideally, you need different images: some that aren't so tall. Alas, all you have are portrait-type images, not landscape-sized images.

Solution

  1. Open the snippet file slider.liquid in your online code editor. Direct link for this here.
  2. Replace line no 2 with the code in the gist file below.

Too small now?

Instead of using large--one-half, use large-two-thirds, inside the class attribute.