Column with half text and half image

turncreativemovement · December 2017

Hello,

I would like to know how get a column with one side just text and one image without padding.

We tried our best but when we close the window to simulate a tablet or phone screen, the image is awkwardly cut to only show about 50 px and the text column is too tight.

You can find the page here: https://medicisforma.turn.com.pt/wp/medicina-no-trabalho/

Thanks

Bryan · December 2017

HI,
can you please show me on a screenshot what would be the result you are looking for. It is cut because there is nothing in it and it collapses. Do you want it to be same height ?
thanks

turncreativemovement · December 2017

Hello,

If you open the link on a normal desktop/laptop screen it should appear as we want it: text to the left, an image that occupies the full page height on the right.

I think it's how you said it, full height on both columns with the image not having padding. And when it goes on a smaller screen like a tablet or phone, ideally you'd see a larger portion than 50 px of the image and then the text afterwards.

Thanks

Bryan · December 2017

Just enter a column on the right side and inside place a [divider height="100"]
It will still be not visible but it will not make the background to collapse.

turncreativemovement · December 2017

Hello,

I did as you suggested but it doesn't seem to be working.
The background still collapses into a bar above and below the text item.

Find some screens below or check the link: https://medicisforma.turn.com.pt/wp/medicina-no-trabalho/

https://postimg.org/gallery/2trf1syhy/

Is there another way of getting a 1/2 column text and 1/2 image?

Bryan · December 2017

Yes, just place 1/2 wraps in a section. One with text and one with and image.
Using a background image will be hard in achieving the effect you want, better use a simple image instead.

turncreativemovement · January 2018

Hello and happy new year!

Sorry for the late reply, we ended up closing for the holidays and returning today.

We tried your suggestion and it seems to be almost perfect! Hopefully you can help us make it perfect.

We made this page to test the layout: https://medicisforma.turn.com.pt/wp/formacao-2/

On our mac's large screen it's perfect, it works like we want in tablet and phone mode too but on normal laptop screens, because the text is very long, a gap forms under the image. We're hoping there's a way to force the image to always cover the column.

Thanks!

Bryan · January 2018

Well it is rather not possible to make the image taller and keep the same width.
You can try with setting the right wrap image as a background and set it to cover.

Column with half text and half image

Comments