CODEWITHSUNDEEP
htmlcssimageresponsive
j4mes83
j4mes83

Reputation: 65

Responsive hero image with button + boxed text problems

I am trying to make a full width hero image with an h1 header, boxed text with 2 sizes of text inside plus a button. I have been wrestling with this all day and it just doesnt seem to work the way i'd like it to. Any help would be really appreciated.

thanks

Images: How it looks at the moment with code

If you notice it is not going full width (gap on the left).

This is how i would like it to look or close enough 

 //css//    

.hero-image {
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;
}

.hero-text {
position: relative;
color: #154774;
}

.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;  
}

.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
 border-radius: 5px;
 padding: 10px 10px 10px 10px;
 color: white;
 background-color: red;
 font-size: 20px;
 width: 200px; 
 line-height: 1.4;
 }
 </style>


 //html//

<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class="herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>

Updated image: Updated image

Upvotes: 2

Views: 2125

Answers (2)

VSM
VSM

Reputation: 1785

.hero-image {
     background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 50px;
}
 .hero-text {
     position: relative;
     color: #154774;
     text-align:right;
}
 .hero-text h1 {
     font-size:40px;
     margin-right:15%;
}
 .hero-text h1 .italic {
     font-style: italic;
}
 .hero-text button {
     border-radius: 5px;
     padding: 10px 20px;
     color: white;
     background-color: #00adee;
     text-align: center;
     cursor: pointer;
     font-size: 20px;
     font-weight: bold;
     bottom: 50px;
     max-width: 150px;
     margin-top: 25px;
}
 .hero-text button:hover {
     background-color: #0597c4;
     color: white;
}
 .herotext2 {
     position:relative;
     border-radius: 5px;
     padding: 10px 10px 10px 10px;
     color: white;
     background-color: red;
     font-size: 20px;
     width: 200px;
     line-height: 1.4;
     margin: 0 0 0 auto;
     text-align:left;
}
 .herotext2 .no {
     font-size: 135px;
     line-height: 130px;
     font-weight: 600;
}
 .herotext2 .tag {
    position: absolute;
     bottom: 26px;
     right: 30px;
     font-size: 12px;
    color: red;
}
<div class="hero-image">
<div class="hero-text">
<h1>IT support for your<br> business - <span class="italic">as easy as<br>child’s play</span></h1>
<p class="herotext2">All inclusive IT GDPR service packages from <span class="no">£33</span><span class="tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>

https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/

I have updated your html format and added new styles..Now it appears as your design but you need to apply relevant font family.

It works nice. Let me know if there is any issue. Thanks.

Upvotes: 2

Francisco A. Cerda
Francisco A. Cerda

Reputation: 124

You are missing absolute positioning the elements inside the hero image. This way, you can force them to stay at certain point inside it, by setting top, right, bottom and left of each one. Don't forget to set parent hero div to position: relative.

Upvotes: 1

Related Questions