Solved

Get Rid of White Space on Desktop view Turbo Theme

Only1mrsfragili
Trailblazer
154 3 37

Hello,

 

Can someone please tell me how to get rid of this empty space?  It's not there on the mobile view of my store.  Here is the preview link if that will be helpful. 

 

 https://2u47xa7z22cpklxb-55024255114.shopifypreview.com

 

Screenshot 2024-04-17 at 10.57.00 PM.png

Accepted Solution (1)
TerenceKEANE
Shopify Partner
294 61 53

This is an accepted solution.

Is the divider in the middle of the two pictures? Can you tell me exactly where?

 

The white space issue will be addressed by the following code. It would be better to check from the actual website rather than the admin section.

If you encounter any issues again, feel free to write.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

shopify.head.jpg

 

<style>



/* Desktop */

@media (min-width: 801px){
.featured-promotions .feature-section img {

    height: 100vh !important;
    min-height: 100vh !important;
}

}



/* mobile */

@media (max-width: 799px){
  div#shopify-section-template--16741108547722__featured_promotions_3aUzf9 {
    max-height: 100vh !important;
}


img.transition--blur-up.lazyautosizes.lazyloaded {
    min-height: 50vh !important;
}
}


  
</style>
Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 5 (5)

TerenceKEANE
Shopify Partner
294 61 53

Hi

 

Of course. But what exactly do you mean? Also, the website link isn't working.

 

Terence.

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Only1mrsfragili
Trailblazer
154 3 37

Sorry, it was a 24 hr link.  On the desk view I have a lot of white space.  I will attach three pics so you can see the difference.  Also can you please tell me how to hide a divider line on desktop only.

 

https://8zekkrn0fy0h04xn-55024255114.shopifypreview.com

 

Screenshot 2024-04-19 at 2.39.57 PM.pngScreenshot 2024-04-19 at 2.40.56 PM.pngScreenshot 2024-04-19 at 2.41.16 PM.png

TerenceKEANE
Shopify Partner
294 61 53

This is an accepted solution.

Is the divider in the middle of the two pictures? Can you tell me exactly where?

 

The white space issue will be addressed by the following code. It would be better to check from the actual website rather than the admin section.

If you encounter any issues again, feel free to write.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

shopify.head.jpg

 

<style>



/* Desktop */

@media (min-width: 801px){
.featured-promotions .feature-section img {

    height: 100vh !important;
    min-height: 100vh !important;
}

}



/* mobile */

@media (max-width: 799px){
  div#shopify-section-template--16741108547722__featured_promotions_3aUzf9 {
    max-height: 100vh !important;
}


img.transition--blur-up.lazyautosizes.lazyloaded {
    min-height: 50vh !important;
}
}


  
</style>
Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
Only1mrsfragili
Trailblazer
154 3 37

Thank you so much! The divider line is actually on a different page, it's on the custom homepage.  The issue is my navigations buttons get hidden for some reason on the mobile view so I added a divider that pushes them down and makes them visible.  However this then make a huge white area on the desktop that I don't want.  Screenshot 2024-04-20 at 7.31.21 AM.png

TerenceKEANE
Shopify Partner
294 61 53

You're most welcome! I'm glad the codes are working.

 

If you're referring to the page below, there's no issue with the 'divider line'. Could you please clarify where exactly you're observing the problem? If you're checking from website preview tools, these areas might be misleading. You can also use the following tool to inspect your website.

 

https://8zekkrn0fy0h04xn-55024255114.shopifypreview.com/pages/custom-homepage

 

 

https://responsivetesttool.com/

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites