Section stacking weirdly on mobile version.

Solved
jorgeregibus
New Member
2 0 0

Hey,

I've been trying to optimise my website to look good on mobile, as a large portion of my traffic will be coming from there. My issue is on my homepage. The 'royal collections' and 'Wineries & distilleries' sections display vertically on mobile whist the display horizontally on desktop. Displaying them this way on mobile means there is far too much vertical scrolling and doesn't look as good. I understand I will need to change some code for this. The ideal solution would be to make it so that the mobile version  has a horizontal scroller for these sections just like the 'our selection' section.

My website is: www.regibus.co.uk .

I would really appreciate some help!

Thanks,

Jorge

0 Likes
LuckyNigam
Excursionist
34 2 6

This is an accepted solution.

Hi @jorgeregibus 

Use this code on your theme.liquid file.

<script>

$(document).ready(function(){

if($(window).width() <= 768){

$('#section-1614621236572d2c1b .grid-uniform').slick({

arrows: false,
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
});

}

});

</script>

jorgeregibus
New Member
2 0 0

Hi @LuckyNigam !

Thank you so much for your help! This code really worked! Unfortunately it only changed the 'royal collections' section and not the 'wineries & distilleries' section and using the same code doesn't seem to be working? Also, the code worked but for some reason they are not sized equally.

Could you please help with this?

Thank you!

Jorge

0 Likes