Shopify themes, liquid, logos, and UX
Hello, our current slideshow images are rendering way too large for mobile visitors - looks fine on desktop however.
Is there a way to fix this for mobile users? web url: www.thewitchesalmanac.com
Thank you very much!
Solved! Go to the solution
This is an accepted solution.
Please use this CSS
<style>
@media (max-width: 767px) {
.slideshow-section .slideshow .item {
padding-top: 0 !important;
min-height: unset !important;
}
.slideshow-section .slideshow .item img {
position: static;
}
}
</style>
Hi @cmelucci
I see that your slideshow image ratio is not good for mobile, I think you should you the image with the height bigger. To make it displays well on mobile, please add the custom CSS below to your theme, it will make the slideshow height depends on your image aspect ratio, see my screenshot: https://take.ms/7vM0l
@media (max-width: 767px) {
.slideshow-section .slideshow .item {
padding-top: 0 !important;
min-height: unset !important;
}
}
Hi @cmelucci
Please open the file: layout/theme.liquid then add the code below to the right before closing tag </head>
<style>
@media (max-width: 767px) {
.slideshow-section .slideshow .item {
padding-top: 0 !important;
min-height: unset !important;
}
}
</style>
Let me know the result
I added your code and checked on mobile. It looks like the slideshow is no longer rendering at all. Code snippet below:
</script>
{% include 'translator' %}
<style>
{{settings.custom_style_1}}
{{settings.custom_style_2}}
</style>
<style>
@media (max-width: 767px) {
.slideshow-section .slideshow .item {
padding-top: 0 !important;
min-height: unset !important;
}
}
</style>
</head>
<body id="{{ page_title | handle }}" class="{% if settings.new_style_css == 'yes' %}site-new-style{% endif %}{% if settings.header_fullwidth != blank %} header-full-width{% endif %}{% if settings.background_color == 'dark' %} dark{% endif %}{% if settings.layout == '1024px' %} layout-1024{% endif %}{% if settings.layout == '1280px' %} layout-1280{% endif %}{% if settings.layout == 'full_width' %} full-width{% endif %}{% if customer %} customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if settings.boxed == 'boxed' %} boxed{% endif %}{% if settings.collection_flex_grid != blank %} collection-flex-grid{% endif %}{% if settings.header_sticky_enable == 'enable' %} enable-sticky-header{% endif %}">
<!-- begin site-header -->
<div class="wrapper">
This is an accepted solution.
Please use this CSS
<style>
@media (max-width: 767px) {
.slideshow-section .slideshow .item {
padding-top: 0 !important;
min-height: unset !important;
}
.slideshow-section .slideshow .item img {
position: static;
}
}
</style>
This worked! Thank you very much 🙂
You are welcome, don't hesitate to let me know if you have any questions
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024