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

Solved
Unseen-art
New Member
4 0 0

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

 

IMG_5646.jpgIMG_5647.jpgIMG_5648.jpg

0 Likes

This is an 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.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Unseen-art
New Member
4 0 0

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!

0 Likes

This is an 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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Unseen-art
New Member
4 0 0
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
0 Likes

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

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Unseen-art
New Member
4 0 0
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
0 Likes