Welcome, Guest

TOPIC: Customization css

Customization css 4 years 11 months ago #1642

enrico Offline New Member Posts: 5 Karma: -1	ok no problem. I wait your reply thanks
	The administrator has disabled public write access.

Customization css 4 years 10 months ago #1645

eLEOPARD
Offline
Administrator
Posts: 409
Thank you received: 54
Karma: -28

Hi Enrico,

Please accept my sincerest apologies for the delay.
I had been seriously busy with some work.

What I have done is, I have used 2 custom classes four-columns-view and three-columns-view the the 3 and 4 columns.

To apply these views. You'll have to add these classes in the row section in your WPBakery Page builder.
Example: https://wpexplorer-themes.com/total/wp-content/uploads/sites/2/2018/01/five-columns-class.png

Here is the updated CSS file (You can remove the previously added CSS, and paste this one)

.isotope-item{
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 6px;
}

.eds-bpm-view, 
.eds-bpm-view img, 
.isotope-item,
.eds-bpm-view .eds-bpm-mask, 
.eds-bpm-view .eds-bpm-content{
    width: 404px !important;
    height: 316px !important;
    overflow: hidden;
}

.mosaic-view-one .eds-bpm-view .eds-bpm-view-heading{
    margin: 60px 0 0 0;
    font-size: 18px;
    padding: 16px;
}

.mosaic-view-one .eds-bpm-view .eds-bpm-view-para,
.mosaic-view-one .eds-bpm-view-first a.eds-bpm-info {
    margin-top: 20px;
    font-size: 16px;
}

.mosaic-view-one .eds-bpm-view-first a.eds-bpm-info{
    padding: 14px 50px;
}

.wpb_wrapper > .eds-bpm-main{
    max-width: 892px;
    margin-left: auto;
    margin-right: auto;
}

/* 3 Columns */

.three-columns-view .wpb_wrapper > .eds-bpm-main{
    max-width: 1100px;
}

.three-columns-view .eds-bpm-view, 
.three-columns-view .eds-bpm-view img, 
.three-columns-view .isotope-item, 
.three-columns-view .eds-bpm-view .eds-bpm-mask, 
.three-columns-view .eds-bpm-view .eds-bpm-content{
    width: 324px !important;
    height: 253px !important;
}

.three-columns-view .mosaic-view-one .eds-bpm-view .eds-bpm-view-heading{
    margin-top: 36px;
}

/* 4 Columns */

.four-columns-view .wpb_wrapper > .eds-bpm-main{
    max-width: 1100px;
}

.four-columns-view .eds-bpm-view, 
.four-columns-view .eds-bpm-view img, 
.four-columns-view .isotope-item, 
.four-columns-view .eds-bpm-view .eds-bpm-mask, 
.four-columns-view .eds-bpm-view .eds-bpm-content{
    width: 234px !important;
    height: 183px !important;
}

.four-columns-view .mosaic-view-one .eds-bpm-view .eds-bpm-view-heading{
    margin-top: 18px;
    font-size: 14px;
    padding: 10px;
}


.four-columns-view .mosaic-view-one .eds-bpm-view .eds-bpm-view-para,
.four-columns-view .mosaic-view-one .eds-bpm-view-first a.eds-bpm-info{
    margin-top: 10px;
    font-size: 14px;
}

.four-columns-view .mosaic-view-one .eds-bpm-view-first a.eds-bpm-info {
    padding: 8px 30px;
}


@media only screen and (max-width: 1199px) {
    .wpb_wrapper > .eds-bpm-main{
        max-width: 892px !important;
    }
    
    .three-columns-view .wpb_wrapper > .eds-bpm-main{
        max-width: 730px !important;
    }
    
    .four-columns-view .wpb_wrapper > .eds-bpm-main {
        max-width: 825px !important;
    }
}

@media only screen and (max-width: 991px) {
    .wpb_wrapper > .eds-bpm-main{
        max-width: 726px !important;
    }
    
    .eds-bpm-view, 
    .eds-bpm-view img, 
    .isotope-item,
    .eds-bpm-view .eds-bpm-mask, 
    .eds-bpm-view .eds-bpm-content{
        width: 320px !important;
        height: 250px !important;
    }
    
    .mosaic-view-one .eds-bpm-view .eds-bpm-view-heading{
        margin: 40px 0 0 0;
    }
    
    .mosaic-view-one .eds-bpm-view .eds-bpm-view-para, .mosaic-view-one .eds-bpm-view-first a.eds-bpm-info{
        margin-top: 10px;
    }
    
    .three-columns-view .wpb_wrapper > .eds-bpm-main{
        max-width: 680px !important;
    }
    
    .three-columns-view .eds-bpm-view, 
    .three-columns-view .eds-bpm-view img, 
    .three-columns-view .isotope-item, 
    .three-columns-view .eds-bpm-view .eds-bpm-mask, 
    .three-columns-view .eds-bpm-view .eds-bpm-content{
        width: 298px !important;
        height: 233px !important;
    }
    
    .four-columns-view .wpb_wrapper > .eds-bpm-main {
        max-width: 550px !important;
    }
}

@media only screen and (max-width: 820px) {
    .wpb_wrapper > .eds-bpm-main{
        max-width: 680px !important;
    }
    
    .eds-bpm-view, 
    .eds-bpm-view img, 
    .isotope-item,
    .eds-bpm-view .eds-bpm-mask, 
    .eds-bpm-view .eds-bpm-content{
        width: 300px !important;
        height: 235px !important;
    }
    
    .mosaic-view-one .eds-bpm-view .eds-bpm-view-heading{
        margin: 40px 0 0 0;
    }
    
    .mosaic-view-one .eds-bpm-view .eds-bpm-view-para, .mosaic-view-one .eds-bpm-view-first a.eds-bpm-info{
        margin-top: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .wpb_wrapper > .eds-bpm-main,
    .three-columns-view .wpb_wrapper > .eds-bpm-main{
        max-width: 340px !important;
    }
    
    .eds-bpm-view, 
    .eds-bpm-view img, 
    .isotope-item,
    .eds-bpm-view .eds-bpm-mask, 
    .eds-bpm-view .eds-bpm-content{
        width: 290px !important;
        height: 227px !important;
    }
    
    .mosaic-view-one .eds-bpm-view .eds-bpm-view-heading{
        margin: 30px 0 0 0;
    }
    
    .four-columns-view .wpb_wrapper > .eds-bpm-main {
        max-width: 280px !important;
    }
}

Please let me know if this works for you.

The administrator has disabled public write access.