Reduce White Space between Image and Text

Solved

Reduce White Space between Image and Text

SNSBooks
Tourist
5 0 0

Hi, I would like to reduce the white space between the image banner and text for mobile view for this page:

 

https://8c7ef3-0e.myshopify.com/pages/about-us

 

SNSBooks_0-1723783202199.png

Can anyone help. please? Thanks.

Accepted Solution (1)

Guleria
Shopify Partner
3403 679 963

This is an accepted solution.

Hello @SNSBooks ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1:empty {
    display: none;
}

 

Thanks

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder

View solution in original post

Replies 5 (5)

Guleria
Shopify Partner
3403 679 963

This is an accepted solution.

Hello @SNSBooks ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1:empty {
    display: none;
}

 

Thanks

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
SNSBooks
Tourist
5 0 0

It worked, thanks a lot Guleria!

 

By the way, could be able to assist in this issue as well https://community.shopify.com/c/shopify-design/publisher-theme-featured-collection-images-getting-bi...

 

Thanks!

Guleria
Shopify Partner
3403 679 963

No clue without checking the code. 
You need to hire a developer to check it or have to wait for a partner reply who faced this issue before.   

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder

BSSCommerce-HDL
Shopify Partner
2303 847 1062

Hi @SNSBooks 

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 screen and (max-width: 750px) {
    .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
        padding-top: 5px!important;
        padding-bottom: 5px!important;
    }
  } 
</style>

Here is result:

BSSCommerceHDL_0-1723783886507.png

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 😍

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

SNSBooks
Tourist
5 0 0

Thanks, @BSSCommerce-HDL

 

Can you have a look on another issue that I encounter?

 

The enquiry link that I posted earlier as below:

https://community.shopify.com/c/shopify-design/publisher-theme-featured-collection-images-getting-bi... 

 

Thanks!