How to disable vertical scrolling on horizontal carousel slider? Only horizontal swiping.

[webdev100]

I have a custom block, similar to the "featured collections" section that is a slider of products I have it set to carousel so it should only be able to slide horizontally, not vertically. However, it clips out the bottom of the product card buy buttons, and leaves just a few pixels of vertical scrolling space that on desktop scrolls annoyingly, and on mobile while scrolling down the page it can take the whole block and move it around freely. I want the height to be fixed, and unscrollable and the slider to only move on the x axis, I tried using overflow-y: hidden and searching up a few other changes but it doesn't seem to activate. Please help!

Heres the website link with the block in question, https://canadavolumes.com/blogs/recipes/creamy-chicken-alfredo-pasta

[TheUntechnickle]

Hey there,

Please add this CSS to your base.css file:

@media screen and (min-width: 990px) {
  .slider--desktop {
    overflow-x: visible !important;
  }
}

Cheers!
Shubham | Untechnickle

[webdev100]

Your solution "works", but not the way I want it to and causes a whole bunch of other issues as well. If I make the overflow-x visible, it makes the bottom slider buttons which I have previous 1/x next unusable. Also, it only works on the desktop, i wish to mix for mobile as well without just making the width of the page as long as the unclipped overflow. I just want it to stay fixed vertically, is that possible?

[webdev100 · Accepted solution]

Ok so I fixed it, just leaving the solution here for anyone else who encounters this problem. To fix it I went into the section code, adding a style="" to the class of the UL slider. The style for the css I put was: overflow-y: hidden; padding-bottom: 10px; which fixed the bottom being clipped issue. 

                 <slider-component class="slider-mobile-gutter slider-component-full-width {% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
                    <ul
                      id="Slider-{{ section.id }}"
                      data-id="{{ section.id }}"
                      class="grid product-grid contains-card contains-card--product{% if block.settings.quick_add == 'bulk' %} related-products-quick-add-bulk{% endif %}{% if settings.card_style == 'standard' %} contains-card--standard{% endif %}
                      grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down
                      {% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
                      role="list"
                      aria-label="{{ 'general.slider.name' | t }}"
                      style="overflow-y: hidden; padding-bottom: 10px;"
                    >