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