Fixing not responsive width of Single Images in Visual Composer

Prelimenary draft of the code but it seems to be working alright so far. Will extend this article with screenshots later on when I’m fully done testing and optimizing the code. In the meantime enjoy.

/*
FIXING NOT RESPONSIVE WIDTH OF SINGLE IMAGES IN VISUAL COMPOSER
by golabs.nl

Row Settings
Row stretch : Stretch row and content (no paddings)
Content position : Middle
Column Setting
<no changes needed>
Single Image Settings
Image size : full
Image alignment : Center
*/
.page .wpb_single_image .vc_figure {
display: inherit;
}

/* Base (1180 Grid) */
@media only screen and (min-width: 1290px) and (max-width: 1390px) { }

/* Desktop (960 Grid) */
@media only screen and (min-width: 960px) and (max-width: 1389px) {
.vc_single_image-wrapper img { max-width: 1020px !important; }
}

@media only screen and (min-width: 769px) and (max-width: 1040px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; }
}

/* Tablet (Portrait) */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 990px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; margin-bottom: 0 !important; }
}

/* Mobile (Portrait) */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; margin-bottom: 0 !important; }
}

/* Mobile (Landscape) */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; margin-bottom: 0 !important; }
}

Leave a Reply