Docs

[Marcus R]

Hi Gang – Just finishing scouring the forum and could not find an answer to my problem.

I have a row with two columns, the left column contains an image, and I would like it to sit at the very bottom of the content band but I cannot work out how to do this, I have tried adding a gap element but there is always padding underneath the image.

I have made sure that there are no padding or bottom margins in the column or row.

Thanks As Usual!

Marcus

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide 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.

[Marcus R]

Hi the url is
http://healthyhappywhys.com/

the images are place holders…

[Jade]

Hi Marcus,

You can add this under Custom > CSS in the Customizer.

.home #x-section-3 .x-img {
    margin-bottom: 0;
}

Hope this helps.

[Marcus R]

Thank You!

That did the trick!

[Friech]

Glad we could help, Cheers!

[Marcus R]

Hi – The trick seems to get unstuck when I a) have to much content in the text column or B) when I add an accordian in the text column.

Please see http://zoejames.com.au/professional-recommendations/

For 2 examples.

Please help!

New log in details to follow

[Marcus R]

This reply has been marked as private.

[Christopher]

Hi there,

In this case you need to adjust the position of image. Please add position: relative;top: 34px; in image style field.

Feel free to increase/decrease top value to adjust the image.

Hope it helps.

[Marcus R]

Hi this is addition to the previous code yes?

[Marcus R]

Nevermind I answered my own question – Thanks it works a treat!

[Marcus R]

Sorry – That’s not fix – because it’s not responsive depending on the width of the screen the alignment easily goes out of whack…

[Christopher]

Hi there,

There are two options:

#1 To add a class to image like my-class and add your style for specific screen width.
You can add following code in customizer -> CSS.
e.g:

@media (min-width:767px) and (max-width:979px){
.my-class{
position:relative;
top:40px;
}
}

@media (min-width:980px){
.my-class{
position:relative;
top:20px;
}
}

#2 Or you can enable ‘marginless columns’ option for this row and add image as column’s background. To do so add background: url("http://zoejames.com.au/wp-content/uploads/2015/12/Micheal-James_800_w.png") no-repeat bottom center;background-size: contain; in column’s style field.

Hope it helps.

[Marcus R]

Went for Solution 2! Thanks So much!

[Lely]

You’re welcome Marcus!

Always,
X

[Author]

Posts