Image banner problems

Store Design
, ,
1

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
Phone Banner.jpg768×1152 53.8 KB

How it looks on mobile:

SHBQA_0-1719390064961.png
SHBQA_0-1719390064961.png396×847 234 KB

Empty Space:

SHBQA_0-1719390680244.png
SHBQA_0-1719390680244.png1861×931 182 KB

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;
}
2

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
5.png442×839 216 KB

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

3

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.

4

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;
}
5

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

6

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