Single images in Visual Composer not behaving

Hope this is something you can help with. The home page of http://louisebay.com has four book cover images that aren't coperating.

The site has Visual Composer which has been used to arrange four images in a row. The first two are JPG, the last two are PNG. All are set to 200x300 pixels. They are included using the 'single image' item component.

When the browser window changes size, the leftmost JPGs don't change size but the PNGs on the right grow. I'm told the effect is worse on a tablet. All should be the same size.

I tried putting a test copy of the site into vagrant on my laptop. All images act as they should (none grow bigger than the others). This suggests a difference between Bluehost and Vagrant/VVV.

I didn't set up this site. Visual Composer isn't up to date (4.4.3), nor is the Story theme, and for some reason whoever created the site didn't input the update codes. I'm unaware of any custom CSS that might affect things.

I'm wondering if:
-Updating VC and WP could fix this.
-Custom CSS could resolve this.

  • Anang

    Hi Morgan

    Thank for contacting us :slight_smile:

    I'm not sure if updating VC and WP will fix this, since I don't know what is causing the issues, but it's really recommended to keep your plugins, themes and WP up to date :slight_smile:

    Custom CSS is worth a try, as I know we can put local custom CSS in Visual Composer that applied to certain page/post only, not globally. So you no need to worry that CSS will affect things in other pages/component of website.

    Let me know if you need help with the css :slight_smile:

    Best Regards

  • Morgan

    Hi,
    Thanks very much for the quick reply.

    Can you recommend CSS to constrain image size? Any other solutions?

    I forgot to ask in my original post if there's some difference in the way JPG and PNG are handled as this seems to be the only difference between the two. Unfortunately, the PNG files have transparent bids, so can't easily be changed to JPG.

    I'm a little constrained in the experimentation I can do because I didn't replicate the problem on my laptop. I don't want to experiment with a live home page.

  • Tyler Postle

    Hey Morgan,

    Hope you're doing well today!

    I just checked out your site using the FF responsive browser tool and all the book covers look to react the same when changing the window size. Did you manage to get this all sorted out? :slight_smile:

    There shouldn't be a big difference in the way png vs jpgs are handled, it sounds more like the CSS associated with them might be different.

    Look forward to hearing back!

    All the best,
    Tyler

  • Morgan

    Hello,
    Thanks for your reply. I'm sorry I didn't post something sooner. I think the problem was being caused by Jetpack's Photon CDN. When I turned that off, all the photos behaved the same. I read something on their help pages about Photon removing image dimensions but not sure why or why it would affect PNG differently. I've got a little screen video that I can post if interested that shows the difference across three browsers.

    It's a big improvement, but I don't consider it completely fixed because the second photo from the left isn't acting like the others. The bottom edge of the photo moves up a few pixels compared to its neighbour on the left when the screen width is reduced to iPad width or lower. All settings are the same for all images, so I don't understand what's causing it. The effect may be more noticeable on tablets.

    Also, on some occasions the images do not appear at all in the iPad Safari. I don't know what that's about. They've got CSS animation applied by VC which could be the culprit, but I doubt it.

    Since writing the original request, I have turned off Photon CDN and turned on Cloudflare (something about Bluehost and the DNS was causing a problem, but that's now resolved). I'm also using ZenCache, but turn it off from time to time when testing things. I'm trying to improve speed, so may try out WP SuperCache shortly in case it's better.

    Any other suggestions or test ideas much appreciated.

    Cheers,
    Morgan

  • Tyler Postle

    Hey Morgan,

    You can add this CSS to fix the height difference with that one cover when reducing browser size:

    .wpb_single_image img {
      height: 300px !important;
    }

    If you don't have a custom css stylesheet you can use this plugin: https://wordpress.org/plugins/simple-custom-css/

    It looks like the width of those images shrinks slightly too though at that screen width so forcing the full height may stretch the images right before they turn to 1 column.

    As for speeding up load times we actually have a post that you may find helpful: https://premium.wpmudev.org/blog/5-quick-ways-to-speed-up-your-wordpress-site/

    Cheers,
    Tyler

  • Morgan

    Hi,
    Thanks for the CSS. It fixes the height issue, but I'm not sure it works well with the pages other responsive requirements. As you predicted, when making the browser window narrower, it causes images to look stretched before it switches over to the tablet screen width.

    Speed optimisation is ongoing, so might get to try out some of the suggestions in that blog post.

    Cheers,
    Morgan

  • Tyler Postle

    Hey Morgan,

    Yeah it looks like with the way VC's classes work that it will keep doing that unless width is specified as well, but then you would need to use media queries and specify dimensions for certain screen widths to make sure it fits properly for each mobile screen. At least that's the only way I can think of to get around it, you may want to ask VC's support team too, perhaps they know of a way to get around it in a more elegant way.

    Let me know if you have any further questions :slight_smile:

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.