Solved

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

newsendy_alc
Tourist
7 0 3

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?

8b094d60-07b4-4343-8685-3ecfff59f1fa.jpgmobile screen 1.jpg

pc.png

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2138 614 487

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.

ThePrimeWeb_0-1712659813454.jpeg

 

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
Shopify Partner
1136 322 276

This is an accepted solution.

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

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2138 614 487

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.

ThePrimeWeb_0-1712659813454.jpeg

 

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!
newsendy_alc
Tourist
7 0 3

The code can solve the display issue of the slideshow on mobile devices, but the footer remains in columns.

9fdcbb5aa30ccf777717bcff201afda.jpge481f3524b3d4367dff088be999ac14.jpg

ThePrimeWeb
Shopify Partner
2138 614 487

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.

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!

PageFly-Henry
Shopify Partner
1136 322 276

This is an accepted solution.

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.

newsendy_alc
Tourist
7 0 3

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.

9fdcbb5aa30ccf777717bcff201afda.jpg