Solved

Can't delete space between image banner and featured products

Rolita
New Member
5 0 0

Hello,

 

I was trying to make my banner clickable without showing the buttons. Once I managed to do it successfully, I noticed that there's now a space between the banner and the featured products on mobile (on desktop it looks good). So I looked for the solution here and found a couple that I tried by editing code but nothing worked so far.

 

Help please! website: www.sunkisses.me

 

Thank you

Accepted Solution (1)

Sheesh_b
Shopify Partner
506 112 115

This is an accepted solution.

Hi @Rolita 
This is strange as the CSS is not reflecting on frontend.

You can paste the below code in theme.liquid just before </head>

<style>
.banner--mobile-bottom .banner__content {display: none;}
</style>

This will surely work.

Let me know if this helps you.

 

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

View solution in original post

Replies 8 (8)

Sheesh_b
Shopify Partner
506 112 115

Hi @Rolita 

I've identified the issue and got the solution for you.

Kindly paste the below CSS in bsae.css at bottom.

.banner--mobile-bottom .banner__content {
	display: none;
}

 

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Rolita
New Member
5 0 0

Thank you. I tried this but didn't work either. Is the problem maybe from the banner itself?

Sheesh_b
Shopify Partner
506 112 115

Hi @Rolita 

You added the CSS but not correctly. There are extra closing brackets in CSS which affecting it to work.

I added the same CSS inline on frontend and it's working as you can see below.

Sheesh_b_0-1708275265418.png

 

Let me know if this helps you to fix the issue.

 

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Rolita
New Member
5 0 0

Not sure what I am doing wrong. I deleted the extra brackets but still not working. Can you please check again. Thank you in advance.

Sheesh_b
Shopify Partner
506 112 115

Hi @Rolita 

Kindly add one closing bracket at red box as shown in the below image.

Sheesh_b_0-1708367246835.png

 

It'll fix the issue.


Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Rolita
New Member
5 0 0

I added the bracket as per the screen shot but the space is still there on the mobile 😞 Could it be something else?

Sheesh_b
Shopify Partner
506 112 115

This is an accepted solution.

Hi @Rolita 
This is strange as the CSS is not reflecting on frontend.

You can paste the below code in theme.liquid just before </head>

<style>
.banner--mobile-bottom .banner__content {display: none;}
</style>

This will surely work.

Let me know if this helps you.

 

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Rolita
New Member
5 0 0

YAY it worked!!!! Thank you soooooo much for the help!