Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #610799

    Marcus R
    Participant

    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

    #610808

    Christopher
    Moderator

    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.

    #612049

    Marcus R
    Participant

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

    the images are place holders…

    #612124

    Jade
    Moderator

    Hi Marcus,

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

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

    Hope this helps.

    #612192

    Marcus R
    Participant

    Thank You!

    That did the trick!

    #612343

    Friech
    Moderator

    Glad we could help, Cheers!

    #708679

    Marcus R
    Participant

    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

    #708680

    Marcus R
    Participant
    This reply has been marked as private.
    #708701

    Christopher
    Moderator

    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.

    #708729

    Marcus R
    Participant

    Hi this is addition to the previous code yes?

    #708734

    Marcus R
    Participant

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

    #708745

    Marcus R
    Participant

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

    #708773

    Christopher
    Moderator

    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.

    #715443

    Marcus R
    Participant

    Went for Solution 2! Thanks So much!

    #715453

    Lely
    Moderator

    You’re welcome Marcus!

    Always,
    X