Show full slider in mobile view 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.

⚠️ Kindly take note :

Above all code editing, you will need to re-edit the code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
We have added an option for you to display image with original quality. Therefore, your store will be using the image with original size and format.
You can enabled it at Channels > Online Store > Customize > General



From EasyStore admin, you may click into Channels > Online Store > Edit source > folder assets > theme.scss

If you are using Fall theme

Step 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;}

Step 2 : Result as below



Step 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

Step 4 : Save and done.

If you are using Maker theme

Step 1 : Search for < .flexslider > and adjust slider height by changing the number 550 according to your design.



Step 2 : Save and you're 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.

Updated on: 22/09/2023