Support » Plugin: Custom VC Column Layout » Tweaks to get Custom VC to work in WP 4.0

  • jamiesmachon

    (@jamiesmachon)


    Hi everyone,
    This plugin is great and I have used it for a while now but it is not yet ready to use out of the box with WP 4.0.
    So to get it to work i installed the plugin as usual giving me the 5 column option in the VC page editor. I then assigned a custom class to each of the 5 element and applied the below css code to the style.css file.

    Please not that the column layout went a bit crackers and changed to 1/12 from 1/5 for me as soon as I saved the custom class. To remedy this I simply re-selected the 1/5 layout and updated my page. Voila she works 5 responsive columns.

    I hope this helps some of you!


    .one-fifth {
    float: left;
    width: 18.8%;
    padding: 0;
    margin-right: 1.2%;
    min-height: 0;
    }

    @media (max-width: 768px) {
    .one-fifth {
    float: none;
    width: 100%;
    }
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Alberto

    (@alberto2nuevocom)

    Great solution, thank you!!

    Hi everyone, I dont know if it was due to the latest updates to WordPress and VC but I had to modify the code I use to get this plugin to work again.

    As before I installed the plugin as normal.

    I then assigned a custom class to the row itself (one-fifth-row) and then a class to each of the first 4 element (one-fifth) then the final element was given another class (one-fifth-last).
    Please note that as before the column layout goes a bit mad and changed to 1/12 from 1/5 as soon as I saved the custom classes. To remedy this again simply re-selected the 1/5 layout and updated the page.

    I then applied the below css code to the style.css file.

    .one-fifth-row .vc_col-sm-3 {
    	width: 19%;
    }
    .one-fifth {
    	float: left;
    	width: 18.8%;
    	padding: 0;
    	margin-right: 1.2%;
    	min-height: 0;
    }
    .one-fifth-last {
    	float: left;
    	width: 20%;
    	padding: 0;
    	margin-right: 0;
    	min-height: 0;
    }
    
    @media (max-width: 768px) {
    	.one-fifth-row .vc_col-sm-3 {
    		width: 100%;
    	}
    	.one-fifth,
    	.one-fifth-last {
    		float: none;
    		width: 100%;
    	}
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Tweaks to get Custom VC to work in WP 4.0’ is closed to new replies.