Docs

[CruW]

Hello,

I created a page with 2 column “marginless” columns. I would like my images to fit 100% in each column. There is a small space at the bottom of each photo. I would appreciate your assistance. I will provide you my login in a private reply.

Thank you.

[John Ezra]

Hi there,

Thanks for writing in!To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[CruW]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for the credentials, but would you mind letting us know in what page is your Marginless columns is? We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[CruW]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for the clarification, the space is cause by the image itself. Please add a CLASS mbn to your image element to remove its bottom margin.

Another thing, that text paragraph underneath the Domaine Eric Rominger will pushed the button a little bit to create a white space between images. So add this custom css on the paragraph’s Text element STYLE field.

margin-top: -5px;

Hope it helps, Cheers!

[CruW]

Hi. I assigned CLASS mbn and changed the margin-top. Only issue I see is on an iPad and mobile. The page doesn’t stack properly – the photos aren’t with the proper text.

Thank you

[Zeshan]

Hi there @CruW,

Thanks for writing back!

This is due to the images you have added as elements. If you want the images to expand 100% of their section’s height, please use background images instead. You can insert the background image in column using following CSS code under Style field of its settings (see: http://prntscr.com/7qeof1):

background: url(URL_TO_YOUR_IMAGE) no-repeat center center; background-size: cover;

Replace URL_TO_YOUR_IMAGE with your image URL.

Thank you!

[CruW]

I tried that and it doesn’t work. Viewed on large iMac and iPad.

[Friech]

Hi There,

Do you mean you want the stacking of element of each entry to be:

Image
Title
Author
Text
Button

If so, you need to utilize the Hide Base On Screen Width option. Basically, on every SECTION that the image is on the right. You need to have two ROWS, one for the desktop view and one for the mobile view.

Please read the following post to know more about Hide Base On Screen Width option.

– https://community.theme.co/forums/topic/switch-layout-of-elements-based-on-screen-size/#post-807682

– https://community.theme.co/forums/topic/timeline-image-rightleft-question/#post-782616

Hope it helps, Cheers!

[Author]

Posts