Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* Grid Extended 1 */
@media screen and (min-width: 981px) {
.ge1 .et_pb_post_extra.el_dbe_grid_extended .post-content {
order: 0;
width: 66% !important;
}
.ge1 .et_pb_post_extra.el_dbe_grid_extended .post-media {
width: 34% !important;
}
}
/* Grid Extended 2 */
@media screen and (min-width: 981px) {
.ge2 .et_pb_post_extra.el_dbe_grid_extended {
margin-left: 20px;
}
.ge2 .et_pb_post_extra.el_dbe_grid_extended .post-content {
order: 3;
width: 66% !important;
}
.ge2 .et_pb_post_extra.el_dbe_grid_extended .post-media {
width: 34% !important;
margin: -20px 0 -20px -20px;
}
}
/* Grid Extended 3 */
@media screen and (min-width: 981px) {
.ge3 .grid_extended {
display: flex;
flex-wrap: wrap;
}
.ge3 .et_pb_post_extra.el_dbe_grid_extended {
width: calc(50% - 10px);
float: left;
margin-bottom: 20px;
}
.ge3 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
margin-left: 20px;
}
.ge3 .et_pb_post_extra.el_dbe_grid_extended .post-content {
width: 60% !important;
padding: 20px !important;
}
.ge3 .et_pb_post_extra.el_dbe_grid_extended .post-media {
width: 40% !important;
}
}
/* Grid Extended 4 */
@media screen and (min-width: 981px) {
.ge4 .grid_extended {
display: flex;
flex-wrap: wrap;
}
.ge4 .et_pb_post_extra.el_dbe_grid_extended {
width: calc(50% - 20px);
float: left;
margin-bottom: 40px;
}
.ge4 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
margin-left: 40px;
}
.ge4 .et_pb_post_extra.el_dbe_grid_extended .post-content {
padding: 20px !important;
}
.ge4 .et_pb_post_extra.el_dbe_grid_extended:nth-child(4n+3) .post-media {
order: 0 !important;
}
.ge4 .et_pb_post_extra.el_dbe_grid_extended:nth-child(4n+4) .post-media {
order: 1 !important;
}
}
/* Grid Extended 5 */
@media screen and (min-width: 981px) {
.ge5 .grid_extended {
display: flex;
flex-wrap: wrap;
}
.ge5 .et_pb_post_extra.el_dbe_grid_extended {
width: calc(50% - 20px);
float: left;
margin-bottom: 40px;
}
.ge5 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
margin-left: 40px;
}
.ge5 .et_pb_post_extra.el_dbe_grid_extended .post-content {
padding: 20px !important;
}
.ge5 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+1) .post-media {
order: 0 !important;
}
.ge5 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) .post-media {
order: 1 !important;
}
}
/* Grid Extended 6 */
@media screen and (min-width:981px) {
.ge6 .et_pb_post_extra.el_dbe_grid_extended {
width: calc(50% - 20px);
float: left;
margin-bottom: 40px;
}
.ge6 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
margin-left: 40px;
}
.ge6 .et_pb_post_extra.el_dbe_grid_extended .post-content {
width: 100% !important;
padding: 30px 0 0 !important;
}
.ge6 .et_pb_post_extra.el_dbe_grid_extended .post-media {
width: 100% !important;
}
.ge6 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+1) .post-media {
order: 0 !important;
}
}
/* Grid Extended 7 */
.ge7 .et_pb_post_extra .post-content {
order: 0;
}
/* Grid Extended 8 */
.ge8 .et_pb_post_extra .post-content {
order: 3;
}
/* Box Extened 1 */
.be1 .et_pb_post_extra {
float: left;
width: calc(50% - 15px);
margin-bottom: 30px !important;
}
.be1 .et_pb_post_extra:nth-child(2n+2) {
margin-left: 30px;
}
.be1 .post-media {
display: none;
}
.be1 .post-content {
margin: 0 !important;
width: 100% !important;
}
@media screen and (max-width: 980px) {
.be1 .post-content {
box-shadow: 0 0 5px 1px rgba(0,0,0,.4);
}
}
@media screen and (max-width: 767px){
.be1 .et_pb_post_extra {
width: 100% !important;
}
.be1 .et_pb_post_extra:nth-child(2n+2) {
margin-left: 0 !important;
}
}
/* Box Extended 2 */
.be2 .post-content {
width: 25% !important;
}
.be2 .post-media {
width: calc(75% + 100px) !important;
}
@media screen and (max-width: 980px) {
.be2 .post-content{
box-shadow: 0 0 5px 1px rgba(0,0,0,.4);
width: 100% !important;
}
.be2 .post-media {
margin: 0 auto;
}
}
/* Box Extended 3 */
.be3 .post-content {
background: rgba(255, 255, 255, 0.9);
width: 80% !important;
}
.be3 .post-media {
width: calc(20% + 100px) !important;
}
@media screen and (max-width: 980px) {
.be3 .post-content {
box-shadow: 0 0 5px 1px rgba(0,0,0,.4);
z-index: 999;
}
}
/* Box Extended 4 */
.be4 .post-content{
box-shadow: none !important;
order: 1 !important;
width: 80% !important;
-webkit-box-shadow: none !important;
}
.be4 .post-media {
width: calc(20% + 100px) !important;
}
@media screen and (max-width:980px) {
.be4 .post-content,
.be4 .post-media {
margin: 0 !important;
width: 100% !important;
}
}
/* Box Extended 5 */
.be5 .post-content{
box-shadow: none !important;
order: 0 !important;
width: 80% !important;
-webkit-box-shadow: none !important;
}
.be5 .post-media {
width: calc(20% + 100px) !important;
}
@media screen and (max-width:980px) {
.be5 .post-content,
.be5 .post-media {
margin: 0 !important;
width: 100% !important;
}
}
/* Box Extended 6 */
@media screen and (min-width: 981px) {
.be6 .et_pb_post_extra .post-media {
order: 1;
}
.be6 .et_pb_post_extra.el_dbe_box_extended .post-content {
margin: 50px -100px 50px 0 !important;
}
}
/* Box Extended 7 */
@media screen and (min-width: 981px) {
.be7 .et_pb_post_extra.el_dbe_box_extended .post-content {
order: 1 !important;
margin: 50px 0 50px -100px !important;
}
}
/* Block Extended 1 */
.bl1 .post-content {
box-shadow: 0px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
margin: 0 auto;
padding: 20px!important;
position: relative;
top: -70px;
width: 85%!important;
}
.bl1 .block_extended .et_pb_post_extra {
border-radius: 0px;
border: 0px;
box-shadow: 0px 0px 0px 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.bl1 .el-read-more-btn a.et_pb_button,
.bl2 .el-read-more-btn a.et_pb_button,
.bl3 .el-read-more-btn a.et_pb_button{
border-radius: 0px 10px 0px 10px !important;
}
.bl1 h2.entry-title {
min-height: 100px;
}
.bl1 .post-media {
border-radius: 0px 10px 0px 10px;
}
/* Block Extended 2 */
.bl2 .post-content {
min-height: 240px;
}
/* Block Extended 3 */
.bl3 .et_pb_post,
.bl3 .block_extended .et_pb_post_extra {
padding-bottom: 0px;
margin-bottom: 0px;
}
.bl3 .post-content {
min-height: 210px;
padding: 20px!important;
box-shadow: 0px 0px 10px 0px;
}
.bl3 h2.entry-title {
background-color: rgba(255, 255, 255, 0.94);
padding: 30px!important;
min-height: 150px;
border-radius: 10px 0px 10px 0px;
}
@media screen and (max-width: 767px) {
.bl3 .et_pb_post,
.bl3 .block_extended .et_pb_post_extra {
margin-bottom: 30px;
}
}
/* Block Extended 4 */
@media screen and (min-width: 981px) {
.bl4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+1) {
width: 60% !important;
margin-right: 3.5% !important;
}
.bl4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) {
width: 36.5% !important;
margin-right: 0 !important;
}
}
/* Block Extended 5 */
@media screen and (min-width: 981px) {
.bl5 .et_pb_post_extra.el_dbe_block_extended {
width: 48.25% !important;
}
.bl5 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+1) {
margin-right: 3.5% !important;
}
.bl5 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) {
margin-right: 0 !important;
}
}
/* Block Extended 6 */
@media screen and (min-width: 981px) {
.bl6 .et_pb_post_extra.el_dbe_block_extended {
width: 23.5% !important;
margin-right: 2% !important;
}
.bl6 .et_pb_post_extra.el_dbe_block_extended:nth-child(4n+4) {
margin-right: 0 !important;
}
.bl6 .et_pb_post_extra.el_dbe_block_extended .post-media-container,
.bl6 .et_pb_post_extra.el_dbe_block_extended .post-media {
height: 150px;
}
}
/* Block Extended 7 */
@media screen and (min-width: 981px) {
.bl7 .et_pb_post_extra.el_dbe_block_extended {
width: 15% !important;
margin-right: 2% !important;
padding-bottom: 0 !important;
}
.bl7 .et_pb_post_extra.el_dbe_block_extended:nth-child(6n+6) {
margin-right: 0 !important;
}
.bl7 .et_pb_post_extra.el_dbe_block_extended .post-media-container,
.bl7 .et_pb_post_extra.el_dbe_block_extended .post-media {
height: 100px;
}
.bl7 .et_pb_post_extra.el_dbe_block_extended .post-content {
padding: 10px !important;
}
}
/* Block Extended 8 */
.bl8 .et_pb_post_extra.el_dbe_block_extended {
display: flex;
align-items: center;
}
.bl8 .et_pb_post_extra.el_dbe_block_extended.image-background .post-media:before {
background: rgba(255,255,255,0.5);
}
.bl8 .et_pb_post_extra.el_dbe_block_extended.image-background:hover .post-media:before {
background: rgba(255,255,255,0.2);
}
.bl8 .et_pb_post_extra.el_dbe_block_extended.image-background .post-content {
padding: 70px 30px;
}
.bl8 .et_pb_post_extra.el_dbe_block_extended {
padding-bottom: 0;
}
/* Block Extended 9 */
.bl9 .et_pb_post_extra.el_dbe_block_extended {
width: 50% !important;
margin-left: 25%;
margin-right: 0 !important;
}
/* Block Extended 10 */
.bl10 .et_pb_post_extra.el_dbe_block_extended {
margin-right: 0 !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
@media screen and (min-width: 767px) {
.bl10 .et_pb_post_extra.el_dbe_block_extended {
width: 50% !important;
}
}
/* Full Width 1 */
.fw1 .post-media {
width: 100px !important;
}
.fw1 .post-content {
width: calc(100% - 220px) !important;
}
@media screen and (max-width:980px) {
.fw1 .post-content {
margin: 0 !important;
width: 100% !important;
}
.fw1 .post-media {
width: calc(100% - 80px) !important;
}
}
@media screen and (max-width:767px) {
.fw1 .post-content {
margin-left: 0 !important;
}
}
/* Full Width 2 */
.fw2 .post-media {
width: 100px !important;
}
.fw2 .post-content {
width: calc(100% - 120px) !important;
}
@media screen and (max-width: 767px) {
.fw2 .post-content {
width: 100% !important;
}
}
/* Full Width 3 */
.fw3 .post-media {
width: 100px !important;
}
.fw3 .post-content {
width: calc(100% - 220px) !important;
order: 0 !important;
}
@media screen and (max-width:980px) {
.fw3 .post-media {
width: calc(100% - 80px) !important;
}
.fw3 .post-content {
width: 100% !important;
order: 1 !important;
}
}
/* Full Width 4 */
.fw4 .post-media {
width: 300px !important;
}
.fw4 .post-content {
width: calc(100% - 320px) !important;
}
@media screen and (max-width:980px) {
.fw4 .post-content {
margin: 0 !important;
width: 100% !important;
}
}
/* Full Width 6 */
@media screen and (min-width: 981px) {
.fw6 .et_pb_post_extra.el_dbe_full_width .post-content {
width: calc(100% - 100px) !important;
padding: 0 !important;
margin-left: 100px !important;
margin-top: 20px;
}
.fw6 .et_pb_post_extra.el_dbe_full_width .post-media {
width: calc(100% - 100px) !important;
margin-right: 0 !important;
}
}
/* Full Width 7 */
@media screen and (min-width: 981px) {
.fw7 .full_width {
display: flex;
flex-wrap: wrap;
}
.fw7 .et_pb_post_extra.el_dbe_full_width {
width: calc(50% - 10px) !important;
float: left;
margin-bottom: 20px;
border-bottom: none;
padding: 30px !important;
}
.fw7 .et_pb_post_extra.el_dbe_full_width:nth-child(2n+2) {
margin-left: 20px;
}
.fw7 .et_pb_post_extra.el_dbe_full_width .post-content {
width: calc(100% - 100px) !important;
padding: 0 !important;
margin-left: 100px !important;
margin-top: 20px;
}
.fw7 .et_pb_post_extra.el_dbe_full_width .post-media {
width: calc(100% - 100px) !important;
margin-right: 0 !important;
}
}
/* Full Width 8 */
@media screen and (min-width: 981px) {
.fw8 .full_width {
display: flex;
flex-wrap: wrap;
}
.fw8 .et_pb_post_extra.el_dbe_full_width {
float: left;
margin-bottom: 20px;
border-bottom: none;
padding: 30px !important;
}
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+2),
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) {
width: calc(50% - 10px) !important;
}
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) {
margin-left: 20px;
}
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+2) .post-content,
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) .post-content {
width: calc(100% - 100px) !important;
padding: 0 !important;
margin-left: 100px !important;
margin-top: 20px;
}
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+2) .post-media,
.fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) .post-media {
width: calc(100% - 100px) !important;
margin-right: 0 !important;
}
}
/* Full Width 9 */
@media screen and (min-width: 981px) {
.fw9 .full_width {
display: flex;
flex-wrap: wrap;
}
.fw9 .et_pb_post_extra.el_dbe_full_width {
float: left;
margin-bottom: 20px;
border-bottom: none;
padding: 30px !important;
}
.fw9 .et_pb_post_extra.el_dbe_full_width {
width: calc(50% - 10px) !important;
}
.fw9 .et_pb_post_extra.el_dbe_full_width:nth-child(2n+2) {
margin-left: 20px;
}
}
/* Full Width Background 1 */
@media screen and (min-width: 981px) {
.fwb1 .et_pb_post_extra.el_dbe_full_width_background .post-content {
width: 55%;
float: none !important;
margin: 0 auto;
}
}
/* Full Width Background 2 */
.fwb2 .el_dbe_full_width_background {
width: calc((100% - 30px)/2);
float: left;
margin-bottom: 30px !important;
}
.fwb2 .full_width_background{
display: flex;
flex-wrap: wrap;
}
.fwb2 .el_dbe_full_width_background:nth-child(2n+2) {
margin-left: 30px;
}
@media sccreen and (max-width: 480px) {
.fwb2 .el_dbe_full_width_background {
width: 100%;
}
.fwb2 .el_dbe_full_width_background:nth-child(2n+2) {
margin-left: 0 !important;
}
}
/* Full Width Background 3 */
.fwb3 .el_dbe_full_width_background {
width: calc((100% - 30px)/2);
float: left;
margin-bottom: 30px !important;
}
.fwb3 .full_width_background{
display: flex;
flex-wrap: wrap;
}
.fwb3 .el_dbe_full_width_background:nth-child(2n+2) {
margin-left: 30px;
}
.fwb3 .post-content {
float: left !important;
}
@media sccreen and (max-width: 480px) {
.fwb3 .el_dbe_full_width_background {
width: 100%;
}
.fwb3 .el_dbe_full_width_background:nth-child(2n+2) {
margin-left: 0 !important;
}
}
/* Full Width Background 4 */
.fwb4 .el_dbe_full_width_background {
width: calc((100% - 90px)/4);
float: left;
margin-bottom: 30px !important;
}
.fwb4 .full_width_background{
display: flex;
flex-wrap: wrap;
}
.fwb4 .el_dbe_full_width_background {
margin-left: 30px;
}
.fwb4 .el_dbe_full_width_background:nth-child(4n+1) {
margin-left: 0;
}
.fwb4 .post-content {
float: left !important;
width: 100% !important;
}
@media screen and (max-width: 980px) {
.fwb4 .el_dbe_full_width_background:nth-child(4n+1) {
margin-left: 30px;
}
.fwb4 .el_dbe_full_width_background {
width: calc((100% - 100px)/3);
}
}
@media screen and (max-width: 767px) {
.fwb4 .el_dbe_full_width_background {
width: calc((100% - 70px)/2);
}
}
@media sccreen and (max-width: 480px) {
.fwb4 .el_dbe_full_width_background {
width: 100%;
}
.fwb4 .el_dbe_full_width_background {
margin-left: 0 !important;
}
}
/* Full Width Background 5 */
@media screen and (min-width: 981px) {
.fwb5 .full_width_background {
display: flex;
flex-wrap: wrap;
}
.fwb5 .et_pb_post_extra.el_dbe_full_width_background {
width: calc(50% - 15px);
float: left;
margin-bottom: 30px;
}
.fwb5 .et_pb_post_extra.el_dbe_full_width_background:nth-child(2n+2) {
margin-left: 30px;
}
.fwb5 .et_pb_post_extra.el_dbe_full_width_background .post-content {
width: 100% !important;
height: 100%;
}
}
@media sccreen and (max-width: 480px) {
.fwb5 .el_dbe_full_width_background {
width: 100%;
}
}
/* Full Width Background 6 */
@media screen and (min-width: 981px) {
.fwb6 .full_width_background {
display: flex;
flex-wrap: wrap;
}
.fwb6 .et_pb_post_extra.el_dbe_full_width_background {
width: calc(33.33% - 20px);
float: left;
margin-right: 30px;
margin-bottom: 30px;
}
.fwb6 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+3) {
margin-right: 0;
}
.fwb6 .et_pb_post_extra.el_dbe_full_width_background .post-content {
width: 100% !important;
height: 100%;
}
}
/* Full Width Background 7 */
@media screen and (min-width: 981px) {
.fwb7 .full_width_background {
display: flex;
flex-wrap: wrap;
}
.fwb7 .et_pb_post_extra.el_dbe_full_width_background {
margin-bottom: 20px;
}
.fwb7 .et_pb_post_extra.el_dbe_full_width_background .post-content {
width: 100% !important;
height: 100%;
}
.fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+1) {
width: 100%;
}
.fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+2),
.fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+3) {
width: calc(50% - 10px);
float: left;
}
.fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+3) {
margin-left: 20px;
}
}
/* Full Width Background 8 */
@media screen and (min-width: 981px) {
.fwb8 .full_width_background {
display: flex;
flex-wrap: wrap;
}
.fwb8 .et_pb_post_extra.el_dbe_full_width_background {
float: left;
margin-bottom: 20px;
}
.fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+1),
.fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+4) {
width: 65%;
}
.fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+2),
.fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+3) {
width: calc(35% - 20px)
}
.fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(2n+2) {
margin-left: 20px;
}
.fwb8 .et_pb_post_extra.el_dbe_full_width_background .post-content {
width: 100% !important;
height: 100%;
}
}
/* Full Width Background Custom Layout 9 */
.fwb9s .fwb9r {
max-width: 100% !important;
}
.fwb9s .fwb9r .et_pb_post_extra {
height: 100vh;
}
.fwb9 .post-content {
background: hsl(0, 0%, 100%) !important;
float: left !important;
padding: 30px !important;
width: 40% !important;
}
.fwb9 .post-meta:after {
background: none !important;
}
.fwb9 .post-media {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (max-width: 980px) {
.fwb9 .post-content {
margin: 0 !important;
width: 100% !important;
}
}
/* Full Width Background 10 */
.fwb10 .el_dbe_full_width_background {
width: 25%;
float: left;
margin-bottom: 0;
}
.fwb10 .full_width_background{
display: flex;
flex-wrap: wrap;
}
.fwb10 .el_dbe_full_width_background:nth-child(5n+1) {
margin-left: 0;
}
.fwb10 .post-content {
float: left !important;
width: 100% !important;
}
@media screen and (max-width: 767px) {
.fwb10 .el_dbe_full_width_background {
width: 50%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment