Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 5, 2020 at 7:47 pm #1170522
    daniejm

    Hi there,

    I hope you had a great holiday!

    I’ve run into some trouble trying to bottom-align an image to a color section, so there is no padding along the bottom of the image. Can you help?

    I found an old thread suggesting a custom class and Quick CSS. This CSS is aligning the image very oddly. That code is:

    
/* position bottom*/
.position-bottom {
position:absolute;
bottom:0;
}

    That custom class was applied to the 2/5 element containing the image.

    For reference, the color section is set up this way:

    • Takes up at least 100% of the browser height
    • No padding
    • 1/1 column for header text
    • 3/5 column for “About Me” text
    • The image I’m trying to bottom-align exists in a 2/5 column element

    It is much appreciated!

    • This topic was modified 4 years, 10 months ago by daniejm. Reason: Added clarification
    January 5, 2020 at 8:28 pm #1170540
    Victoria

    Hey Joe,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
body.home .container_wrap .avia-builder-el-32.av_two_fifth {
    position: absolute;
    bottom: 0;
    right: 0;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 5, 2020 at 8:36 pm #1170542
    daniejm

    Hi Victoria,

    This works great on PC but is causing issues on mobile. There is still padding below the image and the image is overlapping the text:

    I’ve included a screenshot link in Private Content.

    January 5, 2020 at 8:53 pm #1170553
    Victoria

    Hi daniejm,

    Please try using the code like this:

    
@media only screen and (min-width:768px){
    body.home .container_wrap .avia-builder-el-32.av_two_fifth {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

    Best regards,
    Victoria

    January 5, 2020 at 9:52 pm #1170570
    daniejm

    Hi Victoria,

    We’re getting somewhere. The image no longer overlaps the text, but there is still padding beneath the image. An updated screenshot is provided in the Private Content.

    January 6, 2020 at 4:41 am #1170611
    Rikard

    Hi,

    I can’t see Victorias code applying to your site, where exactly did you put it? Did you select to delete the old CSS and JS files under Enfold->Performance after adding the code?

    Best regards,
    Rikard

    January 7, 2020 at 5:44 pm #1171105
    daniejm

    Hi Rikard,

    Sorry for the delay, I’ve been sick.

    The code was added to the bottom of Quick CSS in General Styling.

    I followed your instructions about deleting the old CSS and JS files. No change.

    January 7, 2020 at 8:54 pm #1171211
    Victoria

    Hi daniejm,

    Looks like you changed the element on the page and the code above did not work anymore. Here is the new code:

    
@media only screen and (min-width:768px){
    .responsive body.home #wrap_all .container_wrap .avia-builder-el-33.av_two_fifth {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
@media only screen and (max-width:767px){ 
    .responsive #top.home #wrap_all .container_wrap .avia-builder-el-33.av_two_fifth {
        margin-bottom: 0px;
    }
}

    Also the code above did not affect the portrait mode screen sizes.

    Best regards,
    Victoria

    January 8, 2020 at 1:51 am #1171295
    daniejm

    Hi Victoria,

    Sorry about that. The new CSS is working perfectly. Thank you!

    This thread is ready to be closed.

    January 8, 2020 at 7:13 am #1171336
    Nikko

    Hi daniejm,

    We’re glad that Victoria could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Align photo to bottom of color section’ is closed to new replies.