Hero image - use full width - no seach bar
AnsweredI am trying to add hero image above the search bar, and somehow i can't manage to expand the width of the image.
<div class="container">
<div class="row">
<div class="">
<div class="jumbotron jumbotron-fluid jumbotron-banner jumbotron-banner-no-stack col-lg-12 heroImage">
<picture class="jumbotron-bg">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="CDN URL GOES HERE" media="(min-width: 992px)">
<source srcset=CDN URL GOES HERE" media=" min-width: 768px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="CDN URL GOES HERE" alt="Help Starts Here" class="img-full container-width">
</picture>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="searchBarText">
<h1>How Can We Help You Today?</h1>
</div>
<section class="hero-unit search-box">
{{search instant=true}}
</section>
-
Hi Shobhit,
I'm not sure if you mean adding a second hero image above the existing one, or if you're asking about the width of the existing one, but if you're talking about the one behind the search, I think you can edit that in the CSS:
/***** Hero component *****/
.hero {
background-image: url($homepage_background_image);
background-position: center;
background-size: cover;
height: 350px;
padding: 0 20px;
text-align: center;
width: 100%;
}Does this help?
-
Thanks for jumping in, Celine!
-
@Celine, Thank you for your help. I want to add like a banner image before the search.
-
@Shobhit, not sure I fully understand, but if you want to just have one hero image (and not add a new one on top of it), then, wouldn't moving the search down until it's below the hero image solve the issue?
-
Celine, I got it. I was using older them so my code wasn't behaving exactly as expected. However, do you know can i do to add another banner that cover bottom of the page (above footer) using 100% width. I tried setting container to 100% width but it's inherting the width from main. I tried setting new classes as well.
-
@Shobhit, is this for all pages (ie general footer), or is this for homepage only?
Please bear in mind I haven't tested this myself, but you could try:
IF FOOTER
Go to footer.hbs
Add a div with the banner above <footer class="footer"> (ie right at the top of the edit code box) if you haven't touched the footer before.
Play around with it. You might need to add a class in the CSS for this if you want it to behave different from the footer? Otherwise I would think you can just add class="footer" to your new div?
IF JUST HOMEPAGE
Same as above, but in the home_page.hbs and at the end of the code instead?
Hope that helps, but again, I haven't tested any of this I'm afraid.
Please sign in to leave a comment.
6 Comments