Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp

carolineschnapp/instructions.md

Last active June 21, 2021 20:35
Show Gist options
  • Save carolineschnapp/e09f2284c5ac7bb3b977 to your computer and use it in GitHub Desktop.
Save carolineschnapp/e09f2284c5ac7bb3b977 to your computer and use it in GitHub Desktop.
Download ZIP
Reduce the width of the slideshow by 50% and center it in the desktop view. #slideshow #flexslider
Raw
instructions.md

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.

Raw
slider.liquid
<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 }}">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment