UPDATE: I deactivated Visual Composer v4.8.1 and the image resized fine when browser window was made smaller. But when I reactivated Visual Composer the image DID NOT resize. For the record I am using Quark v1.3.3. Thank you.
Sounds like it’s an issue with Visual Composer then. If you’ve deactivated VC and the images resize as expected, then VC is obviously doing something to stop the images resizing. You’ll need to contact WP Bakery about that issue. Also, without a link to your site, I can’t look at what could be causing it.
I agree with your assessment and I really, really appreciate your help and efforts but its just that YOU created the theme to work with Visual Composer and other page builders. The Visual Composer people think their product is fine. This situation seems like what came first the chicken or the egg! Regarding a test page all I did was install Quark 1.3.3 with a fresh install of WordPress 4.3.1., and latest version of Visual Composer. I created a blank page using the blank page-builder template and added one single image. Then I resized the browser window and the image stayed the same size. Surely you can at least test this for yourself and tell me if you get the same results. I would greatly appreciate it. Thank you.
Do you have a link to your site so that I can see what is happening in your particular instance?
Check this out:
http://viptxtlist.com/wp/test/
Internet Explorer 11 (desktop) and Firefox 42 (desktop) do not resize the image when the web browser window is made smaller. Chrome 46 (desktop) and the Safari Browser with my iphone work fine. Thanks
I did as you instructed and it has been two days. May I ask if there is any progress? It would seem to my limited tech knowledge that since the problem varies from browser to browser it’s the Quark Theme that needs some tweaking possibly. Thank you.
I’ve re-tested my new templates with VC and my images all resize as expected.
The issue on your site is that you have display: inline-block; on the class .vc_figure in the line <figure class="wpb_wrapper vc_figure">. I would suggest you check the settings you’ve used on that row.
Not sure what I should look for. I did a clean install of both your theme and Visual composer. Just added that one image to the page. Any advice of where I need to look to correct the problem. Thank you.
It must be to do with once of the settings on your row or content block. I would suggest looking there for starters.
I just did another quick test and added an image, centered, into a block of text, and it resized fine, so I’m guessing you’ve changed something before or after adding your image that caused it to stop resizing.
Unfortunately, there’s not much more help I can offer as the issue is to do with Visual Composer, not Quark.
When you add an image to a text block yes it works but when you just use the “single image ” element and add it to a row you get the problem I keep referring to. To be clear DO NOT ADD AN IMAGE TO A TEXT BLOCK,JUST ADD A SINGLE IMAGE TO A ROW BY ITSELF and you will see it does not resize with Internet Explorer and Firefox. Thank you.
Note: By default Visual Composer sets the image as “thumbnail”, change that word to “full”.
UPDATE: To reinforce my point using Internet Explorer or Firefox go back to:
http://viptxtlist.com/wp/test/
The first image was added to a row as a single image element by itself. The second image was added to a block of text. As you can see the first image DOES NOT resize with Internet Explorer and Firefox but the second image that is part of a text block works fine with all browsers. Thank you.
I can see the issue you’re referring to, with that Single Image content block. It’s still an issue with Visual Composer though, not Quark.
Try adding the following CSS to your stylesheet:
.page .wpb_single_image .vc_figure {
display: inherit;
}
@amazing2061 @ahortin thanks for your threat here, was already struggling with this myself for a while as well and tried to fix it by writting too much PHP code myself for this… 😉
Anyway, your conversation set me on track for a full CSS solution. So far this is working for me on my localhost but will do some further testing in the coming days.
I’ve used an image with the width of 1290px, matching the boxed layout content wrapper width when it’s at the max size. I’ve yet to figure out how I can get a smaller image to size to the max width of 1290px…
In the comments I’ve added the prerequisites with regards to the settings of the row / column / single image.
/*
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; }
}
