De manière similaire à Bootsrap : colonnes de même hauteur, par ligne, et responsive :
Dans le cadre de la construction d’une page avec visual composer, le script suivant vous permettra de définir automatiquement la hauteur des colonnes d’une même ligne, en se basant sur la colonne la plus haute.
Il suffit d’intégrer ce script et d’assigner la classe « col-same-height » aux colonnes dans visual composer.
Code :
jQuery(window).load(function() {
jQuery(window).resize(resizeColSameHeight);
resizeColSameHeight();
});
/**
* Redimensionnement hauteur des colonnes bootstrap "col-same-height" ligne par ligne selon la taille de la vue
*/
function resizeColSameHeight() {
if (jQuery('.col-same-height').length > 0) {
jQuery('.col-same-height > .vc_column-inner').css('height', 'auto');
if (jQuery('body').width() >= 768) {
jQuery('.vc_row').has('.col-same-height').each(function() {
var maxHeight = 0;
jQuery(this).children('.col-same-height').each(function() {
if (jQuery(this).children('.vc_column-inner').first().height() > maxHeight)
maxHeight = jQuery(this).height();
});
jQuery(this).children('.col-same-height').each(function() {
jQuery(this).children('.vc_column-inner').first().css('height', maxHeight + 'px');
});
});
}
}
}
Laisser un commentaire