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.




Related articles:
How to add/change a logo to the header
Changing slider image

Did this answer your question?