Blox Lite – Content Blocks for Genesis

Category: | Tag:

1. Install Blox Lite – Content Blocks for Genesis

2. Go to Blox LiteSettings > 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 LiteSettings > Misc > tick Marketing Notices

 

Copyright © 2024 Siam Naulak.
magnifiercrossmenu