[Resolved] Split 50/50 Banner Header

Home Forums Support Split 50/50 Banner Header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1169689
    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.

    #1169856
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try adding this CSS:

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

    Let me know 🙂

    #1169979
    Simon

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

    #1170566
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.