Why are there empty spaces?

Store Design
1

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

Please assist!

IMG_0672.PNG
IMG_0672.PNG1290×2796 277 KB

1 Like
2

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 on theme.liquid

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

Tech_Coding_0-1726307815392.png
Tech_Coding_0-1726307815392.png316×507 31.6 KB

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

3

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 tag:

Here is result:

BSSCommerceHDL_0-1726307813372.png
BSSCommerceHDL_0-1726307813372.png1787×625 85.9 KB

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 :heart_eyes:

4

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

6.png
6.png443×545 61.3 KB

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

5

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