I have been making a module that allows me to overlay text on an image on our website.
It looks fine in the module preview section and all seems to operate correctly with white text over the background colour:
However when I try and use it on the webpage I’m building, the H1 text is still coming up as black:
Any ideas where I could have gone wrong? I’m fairly new to this so I don’t have any idea what’s causing this problem!
This is the code I’ve used for the module:
<div class=‘banner-image’ style=“background-image:url(‘{{ module.banner_image.src }}’)”>
<div class=‘banner-text-area’>
<h1> {{ module.h1 }}</h1>
<h1> {{ module.h1_pt_2 }} </h1>
<p> {{ module.h2 }} </p>
</div>
</div>
.banner-image {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
position: relative;
width: 100%;
height: 400px;
display: block;
background-color: #007db9
}
.banner-text-area {
padding: 70px 0px 0px 20px;
color: #fff;
line-height: 0.5;
font-size: 25px;
}
.banner-text-area p {
width: 40%;
line-height: 1;
}
.banner-text-area h1 {
text-align: left;
font-size: 60px;
}
/* .banner-text-area h1 {
color: #fff;
text-align: center;
font-size: 40px;
} */
/* .banner-text-area h2 {
color: #fff;
text-align: center;
font-size: 30px;
} */
@media(max-width: 767px) {
.banner-image{
height: 300px;
}
.banner-text-area h1 {
font-size: 40px;
}
/* .banner-text-area h2 {
font-size: 20px;
} */
}