Why are there empty spaces?

[nicolewx]

Hi, my website has empty areas where the slideshow can't fit - https://fitnessflair.co/

Please assist!

[Tech_Coding]

Hello @nicolewx 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
  .slideshow__media.banner__media.media{
       height: 100% !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL]

Hi @nicolewx, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
   .slideshow__media.banner__media.media {
      height: 100% !important;
   }
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[nicolewx]

Actually is there any way to make it square and longer, rather than being so rectangular? 

[Rahul_dhiman]

Hello @nicolewx 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
height: 21rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks