How to Change the PureSlider Height

By default, our Apollo and Oxygen themes feature a PureSlider with a full-screen height. However, if you'd like to change the height to a fixed value (or perhaps a percentage less than 100%), you can do so by following these instructions:

1). Go into your Weebly Editor.

2). Click on the "Theme" tab, then click on the "Edit HTML/CSS" button in the lower left hand corner.

3). Once in the code editor, scroll in the left sidebar until you find the "STYLES" section. Then, find and click on "_pureslider.less"

4). In "_pureslider.less", find a block of code that starts with ".swiper-container {" It should be near the top of the code. The code block looks like this:

5). Within this .swiper-container block, you'll see a "height: 100%;" value. This represents that PureSlider currently has a height fixed to the full height (100%) of the user screen. If you'd like to replace the height of PureSlider with a fixed pixel value (for example, 800 pixels) you can simply replace the "100%;" with "800px;". Or, if you'd like a percentage value (for example--80% of the users screen height rather than 100%) you can simply replace "100%;" with "80%;" So it would look like this:

6). Save your changes via the blue save button in the upper right hand corner, and you're good to go!

How will this affect mobile settings?

The mobile view for PureSlider will reflect the value you added above. For example, if you had 800px, then the PureSlider would be 800px tall on mobile. If you'd like to add unique mobile settings that are different from desktop settings, here's how you do it: 

1). Go back to the "_pureslider.less" code in the code editor.

2). Right after the end of the .swiper-container { ... } block, add the following code: 

@media screen and (max-width:992px) {
 .swiper-container {
   height: 100%;
 }
}

3). Replace the "height:100%;" value with the height of the PureSlider you'd like on mobile devices. For example, if you'd like PureSlider to have a height of 800 pixels on mobile devices, simply replace "height:100%;" with "height:800px;" So your code would now look like this: 

4). Save your changes by clicking on the blue "Save" button in the upper right hand corner.

Please contact us if these steps are not working for you.

‍