This article shows you how to adjust slider height for Fall and Maker theme.
Our new Fall and Maker themes have a special design which will focus sliders on the middle part in mobile version. We understand you might have different design idea for your sliders and still wish to show full sliders in mobile view. You can do that by adjusting the slider height in mobile view. Here is the guide.
1. Go to Admin Panel > Online Store > Themes > Edit source > folder assets/theme.scss.
2. If you are using Fall theme
2.1 Search for < .flexslider >, below < min-height: 500px; >, add the following codes:
@include at-query($max, $medium) {
height: 500px;
max-height: 500px;
min-height: 500px;
}
2.2 Result as below:
2.3 Adjust the slider height by changing the number 500 according to your design.
height: your preferred slider height
max-height: the maximum slider height
min-height: the minimum slider height
2.4. Save and done.
3. If you are using Maker theme
3.1 Search for < .flexslider > and adjust slider height by changing the number 550 according to your design.
3.2 Save and done.
Tips:
Example shows the result by changing slider height to 250px.
If you think the slider text is too big, you can change its size in Admin > Online Store > Themes > Customize > Slider setting > Slider text. Example shows the result by changing the text size to Extra small.
Alternatively, you can remove the text in Slider content.