Docs

[arefs]

Hello,

I want to position an image on my site so it sits on the margin between sections.

Easiest way to describe this clearly is to show you a screenshot with notes attached:

https://dl.dropboxusercontent.com/u/17713251/2016-04-09_18-49-27.jpg

How can I do this.

Thank you 🙂

[Thai]

Hi There,

Please add this inline CSS under style field of your image:

margin-bottom: 0;

If it doesn’t work, please provide us with your website URL so we can take a closer look.

Thank you.

[arefs]

This reply has been marked as private.

[Christian]

Hey there,

I’m sorry but this would require advanced custom CSS to achieve as the layout varies on different screen width (see http://i.imgur.com/hZ1zrv0.gifv). The code we’ve given will work if the content (text) on the left is shorter than the image at a given screen width. You may wish to consult a developer to assist you with this.

Thanks for understanding. Take care!

[arefs]

Ummm…I’ve very disappointed with your answer.

X theme’s own demo (i.e. a example of what x theme CAN DO) demonstrates that this is possible.

Here is video proof – https://dl.dropboxusercontent.com/u/17713251/2016-04-12_0056.swf

In fact, it was this demo website which gave me the idea to buy an image which can align with the bottom margin of a section.

And now you’re telling me this is custom CSS???????????

Why is it part of your demo theme????

Please can you give me a better answer.

Thank you.

[Christian]

Sorry for the lack of details. This would require custom development if your content on the left column is long. Please see this screencast https://cloudup.com/cdXzMv_owqF (play in Firefox) to see visually what I mean by:

The code we’ve given will work if the content (text) on the left is shorter than the image at a given screen width.

Integrity 2’s left content is short. In one column setup, it gives the appearance of sticking to the bottom because the section’s height is auto. That means it follows the height of its content.

Thanks.

[arefs]

Could you take another look at this?

I’ve reduced the amount of text and now there is only a small gap between the image and the bottom margin.

Screenshot – https://dl.dropboxusercontent.com/u/17713251/2016-04-24_14-03-30.jpg

How can I remove this gap?

There must be some way which doesn’t involve editing my text. For instance, what I reduced the top margin of the section?

Any creative thoughts to achieve what I want would be appreciated.

Thanks.

[Rue Nel]

Hello There,

I have check your site and I have seen the image. It will not always be at the bottom because the height of the column containing image is not the same as the height of the left column (the column containing the text). It will only be at the bottom if the height of the left column is lesser than the right column.

I would recommend that you enable the marginless columns option in the row settings and in the right column settings, please add an inline css vertical-align: bottom;. You can check my test page here: http://www.your-domain.com/an-x-test/

Please let us know if this works out for you.

[arefs]

That works. Thanks.

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts