I want to create a split screen homepage (e.g. https://tympanus.net/Blueprints/SplitLayout/) by using a row with two columns. I want to remove the padding between two columns.

I’ve made the row a section, full height-full width.

I’ve added an image for each column, each image is set for Theme Full – 1170 x variable and Stretch to full width. But there is still padding / gap in the middle of the two columns.

I inspected the code and saw this for the right column.

.vc_row-fluid [class^=”wpb_column”], .vc_row-fluid [class*=” wpb_column”] {
margin-left: 2% !important

When I removed the 2% from margin-left, the right image moved to the center, but there was still a gap on the right of the right image.

I’ve searched the forum but to no avail could not find an answer. Sorry! Any assistance would be appreciated.

Since you have removed the 2% margin the width of both columns is 49% and 49% so you need to override it in your case and set them to 50%.

Can you please share the URL so we can inspect it to see what you have done so far and provide additional code if necessary?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

https://icantphone.com/

The images are too large / just for testing purposes. Your assistance is much appreciated.

Thanks!

Gemma

Looks nice. Exactly as we mentioned.. You need to set the widths to 100%. Btw. we suggest adding a special class name to the row and attaching all the overrides for the split row to it so that it only works when you use this class name. E.g. in “Advanced Global Attributes” of the row, set the Class Name to “my-split-row” and then in css use “.my-split-row.vc_row-fluid …”

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market