Re: The slideshow and footer on the mobile homepage are not fully displayed

newsendy_alc · ‎04-09-2024

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?

ThePrimeWeb · ‎04-09-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

PageFly-Henry · ‎04-09-2024

Hi @newsendy_alc

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.

View solution in original post

ThePrimeWeb · ‎04-09-2024

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.

Was I helpful?