
1. Install Blox Lite – Content Blocks for Genesis
2. Go to Blox Lite > Settings > Styles > tick Disable Default CSS, and insert below css code in your style.css
.blox-caption-wrap {
padding: 120px 0;
text-align:center;
color:#fff;
font-size: 50px;
line-height: 55px;
font-family: 'Poppins', sans-serif;
font-weight:700;
max-width:1120px;
margin: 0 auto;
position:relative;
}
.blox-image-background {
background-size: cover;
background-position: center center;
position:relative;
}
.blox-caption-container::before {
background: rgba(0, 0, 0, 0.5);
bottom: 0;
content: "";
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
}
Responsive layout
@media only screen and (max-width: 960px) {
.blox-caption-wrap {
padding: 100px 0;
font-size: 50px;
line-height: 55px;
}
}
@media only screen and (max-width: 768px) {
.blox-caption-wrap {
padding: 80px 20px;
font-size: 40px;
line-height: 45px;
}
}
@media only screen and (max-width: 480px) {
.blox-caption-wrap {
padding: 50px 20px;
font-size: 30px;
line-height: 35px;
}
}
3. If you are using free version and don't want upgrade notification go to Blox Lite > Settings > Misc > tick Marketing Notices