Best way to achieve picture placement

Support
#1

Hello here is what I want to achieve

One section - two columns

Image on background of the left column
Text centered in the right column

I tried it but - for some reason I cannot get rid of the top / bottom space around the image

Thanks for your help

#2

Hi There,

I got page not found on my end, please review the provided URL.

Thanks!

#3

Right - someone deleted my test page :X - here is the link

#4

Hi,

The image element has a default bottom margin.

To remove it, you can add mbn in the class field of your image element.

mbn - margin bottom none.

Hope that helps.

#5

Perfect ! that is what I was searching for :slight_smile:

#6

Glad we could help.

Cheers!

#7

Hello Nabeel

I have the same problem with another block -this time displaying a slider

I have added the slider shortcode in the block - added the mbn tag in class of row, block etc…

but the top/bottom back gaps are still there. Any idea ?

#8

Hey there,

It’s happening due to the left column’s height. This is to achieve the equal columns height in a section that have different columns height. To have equal spacing around, you may try adding the following code in your Customizer:

.x-section .x-container.marginless-columns .x-column {
    vertical-align: middle !important;
}

Hope this helps!

1 Like