White space on homepage (desktop and Mobile) + Shop page (only Mobile).

[Unseen-art]

Hi,

I don't know whether anyone can help at all? I seem to have loads of white space on my page - it's been like it for the last week. I've attached some screenshots below. Any advice would be much appreciated. On desktop it's just on the Homepage, but on the Mobile it's homepage and on the shop page, as seen below. 

I've contacted the Shopify support team but don't seem to be making much progress at the moment. 

Our website is: www.unseen-art.co.uk

Thanks, 
Peter

[diego_ezfy · Accepted solution]

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.slideshow__text-content{
    padding-top: 0 !important;
}

[id*='section'] + .index-section--slideshow {
    padding: 0 !important;
}
.slideshow__text-wrap--mobile {
    max-height: 20px;
}

@media (max-width:767px){
    .slideshow__text-wrap--mobile {
    max-height: 120px;
}

}

@media (max-width:535px){
    .slideshow__text-wrap--mobile {
    max-height: 155px;
}

}
</style>

 
Let me know whether it works.

[Unseen-art]

Thanks for that! That's fixed the issue on the home page :). 

The issue with the mobile app (product page) still persists. I don't whether you can think of a solution for that? 

Thanks so much for all your help!

[diego_ezfy · Accepted solution]

@Unseen-art Sure, follow the previous instructions and add this code as well:

<style>
.template-product [id*='FeaturedMedia']{
    max-height: 30vw;
    overflow: hidden;
}

@media (max-width:750px){
    .template-product [id*='FeaturedMedia']{
    max-height: 80vw !important;
}
}


@media (max-width:650px){
   .template-product  [id*='FeaturedMedia']{
    max-height: 100vw !important;
}
}

</style>

Let me know whether it works. Kindly click on "accept as solution" and give it a like if it helps you!

Regards,
Diego

[Unseen-art]

Hi Diego,

Fab - thanks! I'll do that now.

That one doesn't seem to have worked. Am I putting that code in the same
section (Above 'over) or should I be putting it somewhere else?

Thanks,
Peter

[diego_ezfy]

You should put it right above the </body> tag at theme.liquid. 

Kind regards,
Diego

[Unseen-art]

Hi Diego,

Unfortunately, that one doesn't seem to be working. I've added it in but
can't seem to see any changes.. I don't know if you have any other
suggestions?

Thanks again for all of your help,
Peter