Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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;"
>
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
We’re here to simplify your Shopify experience!
Let’s chat over a virtual coffee ☕️ and find the perfect solution for your store.
Our Services: Store Build & Redesign | Theme Customization | Website Audit & Optimization | Bug Fixes | App Setups
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?
This is an 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;"
>
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024