- This topic has 3 replies, 2 voices, and was last updated 2 years, 11 months ago by
Tom.
-
AuthorPosts
-
February 18, 2020 at 2:59 pm #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.
February 18, 2020 at 8:10 pm #1169856Tom
Lead DeveloperLead DeveloperHi 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-developmentFebruary 19, 2020 at 12:51 am #1169979Simon
Thank you, added into @media only screen and (min-width: 768px) and it works great!
February 19, 2020 at 8:17 am #1170566Tom
Lead DeveloperLead DeveloperAwesome ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.