Remove white space between image banner and collection grid on mobile version - dawn theme

[emekayode]

URL: https://ts3jt3g4x80eqzy9-17240367.shopifypreview.com

How do I make the image banner or collection grid on my mobile version to stretch to its full width and remove the big white space between the banner and collection grid?

[EBOOST]

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
	body  section .banner__media:first-child {
		display:none!important;
	}
	body .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
		min-height: inherit!important;
	    position: absolute;
	    height: 100%;
	    left: 0;
	    top: 0;
	    width: 100%;
	}
	body  section .banner__media + .banner__media {
		position: static;
    	height: auto;
	}
	body  section .banner__media + .banner__media img {
		position: static!important;
	}
}

[emekayode]

Is there a reason why when I add the solution, it overrides this code below which I added to display my password page image:

@media(max-width:749px){
body .banner__media:first-child{
display:block;
}
  
}
@media(max-width:749px){
body .banner__media{
height:100vh;
}
}

So when I add the solution you provided it removes my password page image, but when I take it out, it shows my password page again

[EBOOST]

Hi,

If you only want apply homepage. You can can follow steps below:

1. Go to Layout/theme.liquid add code below to body tag

template-{{ request.page_type | handle }}

2. Update code above to code below (only need to add “.template-index” after body):

@media(max-width: 749px){
	body.template-index  section .banner__media:first-child {
		display:none!important;
	}
	body.template-index .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
		min-height: inherit!important;
	    position: absolute;
	    height: 100%;
	    left: 0;
	    top: 0;
	    width: 100%;
	}
	body.template-index section .banner__media + .banner__media {
		position: static;
    	height: auto;
	}
	body.template-index section .banner__media + .banner__media img {
		position: static!important;
	}
}