Multicolumn section back to original size and include swipe like mobile on desktop

[lslelegance]

Hi I wish to have my Multicolumn card section back to original size and include swipe like mobile on desktop version as per image attached thanks ! website: https://lslelegance.myshopify.com

[LitExtension]

Hi @lslelegance ,

Please go to Assets > base.css file, find ‘grid–2-col-tablet .grid__item’ and change code:

Hope it helps!

[lslelegance]

@LitExtension thanks worked ! but how can I change the mobile version card size of the multicolumn also pls ? And add the swipe effect on the desktop version thanks a lot !

[lslelegance]

@LitExtension how can I make the phone multicolumn bigger also pls ?

[LitExtension]

Hi @lslelegance ,

Go to Assets > base.css and paste this at the bottom of the file:

.multicolumn-list.slider {
	position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}
.multicolumn .slider-buttons {
	display: flex;
}

[lslelegance]

Hi yes worked perfect but I am missing the arrows as shown ( I draw them in the image where I want them and the size ) in the image on the side of the multicolumn. Can you pls assist @LitExtension

[lslelegance]

@LitExtension this is the original how it looks without arrows so people can’t click left or right on the website for the images to slide to right or left

[LitExtension]

Hi @lslelegance ,

Please add ‘!important’ here:

[lslelegance]

@LitExtension I did it but still didnt work maybe can give u access to my account and check pls ? thanks

[LitExtension]

Hi @lslelegance ,

You just need to declare ID here, it will work fine:

[lslelegance]

Hi but my main issue is to p me put the arrows on the side of the multicolumn and make them bigger in size pls also ? Thanks

[LitExtension]

Hi @lslelegance ,

Go to Assets > base.css and paste this at the bottom of the file:

.multicolumn .slider-button {
    position: absolute;
    top: 40%;
    z-index: 999;
  }
  .multicolumn .slider-button .icon {
    height: 2rem;
  }
  .multicolumn .slider-counter{
    display: none !important;
  }
  .multicolumn .slider-button--prev {
    left: 0;
  }
  .multicolumn .slider-button--next {
    right: 0;
  }

[lslelegance]

@LitExtension

Thanks so much !

Is I possible to make the arrows a bit bigger and can have a smoother transition effect of the images like swiping effect on mobile ? thanks ! so much

[LitExtension]

Hi @lslelegance ,

• Increase icon size: Please change code here:

• Transition: this is not possible, if you want you need to change and add another slider for it

[lslelegance]

I changed to 2.5 rem but size stayed the same seems.

this is not possible, if you want you need to change and add another slider for it <— how can I do that pls?

[LitExtension]

Hi @lslelegance ,

Please add code here:

Code:

.multicolumn .slider-button {
    position: absolute;
    top: 30%;
    z-index: 999;
    width: 55px;
    height: 55px;
}

[lslelegance]

@LitExtension can u help me move the sliders a bit further out on mobile version pls ? and if can also the transition when moving photos when pressing the arrows to be same as mobile version thanks