Split 50/50 Banner Header

[Simon]

I’m trying to create a 50/50 split heading banner to replace my existing homepage banner with a gradient on the left and a background image on the right. My element code is:

<div class="nlbanner-alt">
	<div class="grid-100 grid-parent">
		<div class="grid-50 mobile-grid-100 tablet-grid-50 nlheadp">
			<span class="hide-on-mobile">
				<h5 class="nlwhite nlmb0">Welcome to NormanLuke</h5>
			</span>
			<h1 class="nlwhite aligncenter">
				Header
			</h1>
			<h2 class="nlpb10">
				sub heading
			</h2>
			<p class="nlwhite">This is a short description text in paragraph format as way of an introduction.</p>
			<ul class="nlwhite">
				<li>Bullet</li>
				<li>Points</li>
				<li>List</li>
				<li>of</li>
				<li>Services</li>
			</ul>
		</div>
		<div class="grid-50 mobile-grid-100 tablet-grid-50 nlhome-header" >
			<!--Welcome to our website-->
		</div>
	</div>
</div>

and my css includes the following for mobile, tablet and desktop:

.nlbanner-alt {
    background: linear-gradient(to top right, #fdc21d 0%, #AC0BDA 100%);
}
.nlhome-header {
  background-image: url('mobile-image-url');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top:300px;
}
@media only screen and (min-width: 768px) {
  .nlhome-header {
    background-image: url('tablet-image-url');
  	background-repeat: no-repeat;
  	background-size: cover;
  }
  .nlheadp {
    padding:40px;
  }
}
@media only screen and (min-width: 992px) {
  .nlhome-header {
  	background-image: url('desktop-image-url');
  	background-repeat: no-repeat;
  	background-size: cover;
  }
  .nlheadp {
    padding:80px;
  }
}

I can’t figure out where I’m going wrong with the image. I’ve tried added padding and comments into the empty column and I’m starting to think I’m using the grid system wrongly so would really appreciate some help. Feel free to click through to the homepage from the logo to see the elementor driven banner that I’m hoping to replace.

[Tom]

Hi there,

Try adding this CSS:

.nlbanner-alt .grid-100 {
    display: flex;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Simon]

Thank you, added into @media only screen and (min-width: 768px) and it works great!

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts