0

With Visual Composer(now WP Bakery), I have a banner image that's 1200px wide. The max width of the viewport is 1900px. I'm trying to set up a Row with a Single Image element that will stretch the image to the full 1900px width and preserve the same height dimension.

For my Row I have "stretch row and content (no padding)" selected. However, the single image element of 1200px wide is aligned to the left of the viewport so that when the display is 1900px wide, there's 700px of white space from the right of the image to the right border of the viewport. The image is not stretching.

Any ideas as to how to stretch the image and preserve the height? Or do I need to actually create a 1900px wide image?

Tass Times
  • 157
  • 4
  • 15
  • *"The max width of the viewport is 1900px"* - How in the world would you know that? Considering current technology, it's up to `5120px` on an Apple iMac 27-inch (Retina 5K Display). Unless in your case it's not the device viewport, but a transformed element, with `max-width` set. On a different note, without a [mcve], we can't be of much help. – tao Feb 03 '18 at 18:29
  • Yes, the viewport could be more than 1900px. It's more a matter of trying to stretch an image out to fit the viewport width when the image's width is thinner in the confines of WP Bakery. I'm doing all of this via the WP Bakery front-end editor, so I don't have my own CSS to post, but I will try to grab some of their code if it will help. – Tass Times Feb 03 '18 at 18:46
  • The principle is to give the image `width:100%;display:block;height:auto;`. However, in order to determine the minimal strength of the selector, you'd need to inspect whatever you have and come up with a stronger one. Ideally, you'd use the same selector and just define your rule later than the existing one. – tao Feb 03 '18 at 18:49
  • Thanks, Andrei! I found the div where plugging in your `width:100%;display:block;height:auto;` code in Chrome's Inspector stretched the image successfully. I had to put `width:100%` in the `img` tag and also on this `figure`, one level up containing the image, I had to include `display:block`: `
    ` So, now it's just a matter of figuring out how to get the custom CSS in WPBakery to line up with this. Thank you!
     – Tass Times Feb 03 '18 at 19:23
  • You don't have to "line up". All you need is to find the right strength of your selector so it applies when you want it to and it does not apply when it should not. – tao Feb 03 '18 at 19:29

2 Answers2

0

I came across this answer while trying to solve the same question. I gave the row a css class of fullWidthImageRow and added the following to the theme.css

div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure {
    width: 100% !important;
}
div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure > div {
    width: 100% !important;
}
div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure > div > img {
    width: 100% !important;
}

works on current version of WPBakery

NAMS
  • 983
  • 7
  • 17
0

For the latest version, I've used:

div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .type-image > img {
    width: 100% !important;
}
Francisco Campos
  • 1,191
  • 8
  • 16