Adjust column height, vertical alignment, mobile layout

Support
#1

Hello,
I have a row giving my issues on the site http://uwr.staging.wpengine.com/ built with Visual Composer.

The third section divided in four parts is not aligning correctly even though the images are the same size.
The text will not align to the top, even with the vertical-align command.
Furthermore, the sections bleed over each other when viewed in tablet and mobile format.

If prompted, use un: demo and pw: df697500cba2

Thanks,
LF

#2

Hello There,

Thanks for writing in! You have set up the content band and background image incorrectly.

Please edit your image first: http://uwr.staging.wpengine.com/wp-content/uploads/meet-the-team-day1.jpg
You will need to break this down into 4 images. Each of those 4 images is needed which can be set as a column background image.

Or as an alternative, you may remove the color overlay in the image. The images needs to display in full original color. You may still add the background image in your content band. In each of the columns, that is where you’ll gonna apply an opaque color.

If you give us access to your site, we would be glad to give you an example of how its gonna be set up. In that way, we could save time in dealing with your desired layout.

Please post the WP access in a secure note.
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#3

#4

Hi,

As suggested by my colleague, you need to slice your background image into 4 separate images

http://uwr.staging.wpengine.com/wp-content/uploads/meet-the-team-day1.jpg

Then set each image as background to corresponding column.

Make sure to enable marginless column in your content band.

Hope that helps

#5

Hello,
I have done as instructed but have hit a new set of issues. There is space between all of the columns where I don’t want it and no space between the text - some of it is cut off - where I do want it.
Please help ASAP,
LF

#6

#7

Hello There,

I went ahead and edited your columns.
I added this “; background-size: cover; padding: 40px 20px;” in the inline css as well.

Kindly check your site now.

#8

Yes! That looks better, thanks!

#9

We are delighted to assist you with this.

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.