Shopify themes, liquid, logos, and UX
In Dawn template, the desktop homepage displays correctly, but on the mobile homepage, the slideshow only shows the middle part without displaying fully, and the footer changes from one row to one column. Can anyone provide a solution to this issue?
Solved! Go to the solution
This is an accepted solution.
Hey @newsendy_alc,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.slideshow__slide .media>*:not(.zoom):not(.deferred-media__poster-button) {
position: relative !important;
}
.slideshow__slide .banner__media {
position: relative !important;
}
.slider.slider--everywhere .slider__slide {
height: fit-content !important;
min-height: 0 !important;
max-height: unset !important;
}
slideshow-component .slideshow.banner {
height: max-content !important;
min-height: 0 !important;
}
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 0 !important;
padding: 0 !important;
}
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
padding: 0 !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
This is an accepted solution.
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file -> Save
@media (max-width: 767px){
.slideshow__media.banner__media.media img {
object-fit: contain !important;
}
div#Slider-template--22164165165335__e11e3703-312e-4eba-a1d7-bd23d233083e {
height: 2% !important;
}
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hey @newsendy_alc,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.slideshow__slide .media>*:not(.zoom):not(.deferred-media__poster-button) {
position: relative !important;
}
.slideshow__slide .banner__media {
position: relative !important;
}
.slider.slider--everywhere .slider__slide {
height: fit-content !important;
min-height: 0 !important;
max-height: unset !important;
}
slideshow-component .slideshow.banner {
height: max-content !important;
min-height: 0 !important;
}
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 0 !important;
padding: 0 !important;
}
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
padding: 0 !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
The code can solve the display issue of the slideshow on mobile devices, but the footer remains in columns.
Hey @newsendy_alc, There's not enough space for the footer to be displayed in one row on a mobile. It has to be in a column.
This is an accepted solution.
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file -> Save
@media (max-width: 767px){
.slideshow__media.banner__media.media img {
object-fit: contain !important;
}
div#Slider-template--22164165165335__e11e3703-312e-4eba-a1d7-bd23d233083e {
height: 2% !important;
}
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you very much for your solution!The code can solve the display issue of the slideshow on mobile devices, but the footer remains in columns.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025