Huge gap between banner and rich text in the mobile view of my website

Store Design
,
1

Hi,

Only in the mobile view there is this big white space. Anyway to reduce it? Its not like this in desktop view.

IMG_4608.jpg
IMG_4608.jpg1170Ă—2532 244 KB

Thanks!

1 Like
2

Hi @turtlelionowl
Please put this code

.slideshow__text:empty {
    display: none;
}

in custom css part of slideshow section

pawankumar_0-1714282205112.png
pawankumar_0-1714282205112.png436Ă—873 32.9 KB

Thanks!

3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
4

Hi @turtlelionowl

That space is the container content text of the banner. Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px) {
.banner--mobile-bottom .slideshow__text.banner__box {
    display: none;
}
}

And Save.

Result:

Made4uoRibe_0-1714308033280.png
Made4uoRibe_0-1714308033280.png580Ă—510 169 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

This worked, thanks!!