Get Rid of White Space on Desktop view Turbo Theme
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
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.
<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>
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
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.
<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>
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.
Community Blog Articles
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025