Forced fullwidth row background VC

Hi @andreeabutiu.

Thanks for the comments and glad you like the plugin.

Re the VC full width question, (if I am understanding the issue correctly) to the best of my knowledge, if you have a full width row in VC, then the row expands (horizontally) to the width available to it within the containing block. So, for example, in the context of a normal page/post, if your theme is set to full width and you have a full width row, then the row will extend to the left & right of the screen. However, if you have a boxed theme or if you have a sidebar, the same row will only extend to the space available.

With that in mind, if you have a full width row in a content block, and that content block is added inside a non-full width area or page or post, then it will only extend as far as it can.

I think this answers your question, but if I have misunderstood, do let me know.

Regards,

Artem (@Loomisoft)

Hi,

Sorry, I didn’t properly explain. The Visual Composer row has the Row Stretch option ( see here: https://wpexplorer-themes.com/total/wp-content/uploads/sites/2/2016/10/total-vc-stretch-row.png ) where your row can be Standard (which means both background and content will be contained in your container ), Stretch row (which means your background will extend to fullwidth regardless if you container is set for example to 1170px ) or Stretch row and content which means both the background and the content will extend to fullwidth regardless of the container size.

VC does this by applying negative margins and such.

For example I had a row that uses a background image and the row is set to ” Stretch row” so that the background image occupies the whole width of the screen, but the content will still be contained in my wrapper size which is 1170px. When I insert the block in a page the background stops at the wrapper size instead of extending to fullwidth as it would on a normal page.

See an example (this row has a background color only, but it should explain my point either way): https://image.prntscr.com/image/89c1e96e3ac347c39913acf9d95141df.png

Let me know if I can better clarify this.

Sorry – you’re right the stretch row does stretch across the screen by setting negative margins on load.

We’ve just tested a stretched row in a page with a background image and one in a content block also on the same page. Both stretch okay. See https://downloads.loomisoft.com/vc-stretch-row-test/vc-stretched-row-in-content-block.PNG.

For reference, in both cases we’ve set the image to “cover” and in both cases we have used para=”full in the shortcode. Are you using these settings?

Hi,

Sorry for my delay in response. I had to tackle multiple other projects and didn’t get a chance to test again until now. I tried again with setting the row to stretch and image set to cover, this is my result: https://image.prntscr.com/image/889f3df29bb5492ba21366a78c620df4.png

and this is the code I am using:

	<div class="container">
	<?php echo do_shortcode('[ls_content_block id="123" para="full"]'); ?>
	</div>

where the container class is limited in width.

Unfortunately I must proceed with this project so I am going to just code the background for now. If you say it works for you perhaps it’s just a theme related issue.

Maybe it’s a good idea to just leave it at that if you don’t get any other reports about this and pursue the problem only if someone else experiences it as well.

Thanks for your time!

• This reply was modified 8 years ago by andreeaButiu.

We’ve looked a little further into this. It turns out that if an outer wrapper has overflow: hidden, which may actually be part of the theme (as is the case for instance in the twenty Ten theme), the VC stretch row function does not work.

We tested it with the Twenty Ten theme and we also did a second test with the original theme we were using before, but by putting our own div with overflow hidden around the row.

Both tests confirmed this … i.e. the row did not stretch.

Could it be this is what’s going on in the case of your page?

Yup! You are correct! That was it. Thanks!