Column with half text and half image

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: [Links visible only for registered users]

Thanks

Comments

  • 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
  • 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
  • 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.
  • 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: [Links visible only for registered users]

    Is there another way of getting a 1/2 column text and 1/2 image?
  • 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.

  • 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: [Links visible only for registered users]

    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!
  • 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.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.