Image banner problems

Solved

Image banner problems

SHBQA
Tourist
9 0 2

I am facing two problems with my image banner.

 

1. Firstly, I am showing two different banners (one for mobile and one for desktop). However, the banner on mobile is not fully showing. This is the CSS code i am using:

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}

2. Moreover, I want to remove the empty space on top of my image banner. I tried remove the padding from both the header and the image banner, but it is not working.

 

Actual image:

Phone Banner.jpg

How it looks on mobile:

 

SHBQA_0-1719390064961.png

 

Empty Space:

SHBQA_0-1719390680244.png

 

Theme: Dawn

URL: shbqa.com

Password: 1

 

Edit: I was able to remove the empty space under the header by adding the following code to base.css:

#shopify-section-sections--21915631353890__header{
  margin-top: -10px !important;
}
Accepted Solutions (2)
Raj-webdesigner
Shopify Partner
325 76 78

This is an accepted solution.

Add This css in your edit code > style.css file

 

.shopify-section-header-sticky sticky-header.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
    bottom: 0 !important;
}

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Raj-webdesigner
Shopify Partner
325 76 78

This is an accepted solution.

This is the actuall size of your image, but if you want to increase the height, you can add and increase it in this code.

.banner__media.media.banner__media-half.scroll-trigger.animate--fade-in {
    height: 39rem !important;
}

You choose your custom height

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 5 (5)

GTLOfficial
Shopify Partner
283 52 53

Hello @SHBQA 

Go to online store ---------> themes --------------> actions ------> edit code-------> assets----->section-image-banner.CSS ----> line number 65
and add this code

@media screen and (max-width: 749px) {
.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
{
height: 73rem;
width: 100%;
}
}

and the result will be
5.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
SHBQA
Tourist
9 0 2

Thank you so much for you fast reply, however, its not working for me.

 

Edit: on inspect element (phone view) it is showing as it shows in your image, but not on my actual phone.

Raj-webdesigner
Shopify Partner
325 76 78

This is an accepted solution.

Add This css in your edit code > style.css file

 

.shopify-section-header-sticky sticky-header.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
    bottom: 0 !important;
}

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


SHBQA
Tourist
9 0 2

This worked out perfectly, thank you so much. Can you help me show the full length of the image on mobile?

Raj-webdesigner
Shopify Partner
325 76 78

This is an accepted solution.

This is the actuall size of your image, but if you want to increase the height, you can add and increase it in this code.

.banner__media.media.banner__media-half.scroll-trigger.animate--fade-in {
    height: 39rem !important;
}

You choose your custom height

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com