Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 20, 2022 at 6:21 pm #1358925
    envisageiam

    Hi, I hope you are having a beautiful day.

    I would like to align an image to the top or bottom of a color section. When I scale to mobile there is padding below my image and it centers in the color section, as you can see it is doing now with the logo.

    I would also like to be able to align a second image to the bottom of the second color section.

    Thank you for your help : )

    July 20, 2022 at 8:22 pm #1358956
    Rikard

    Hey envisageiam,

    I’m not sure exactly what you are looking to achieve, but if you add columns to your Color Section, then you can select to show it at 100% height in the element options->Layout->Height. Then you can set the Image to display in an Absolute position in the element options->Advanced->Position. Set the bottom value to 0, and leave the others empty.

    Example in first Color Section on the page: https://wpexpert.se/enfold/

    Best regards,
    Rikard

    July 21, 2022 at 2:03 pm #1359027
    envisageiam

    Thank you for your response, but that didn’t work. I have attached a screen shot of what I am trying to achieve along with credentials. Maybe I am missing something.

    Thank you for your help

    July 21, 2022 at 6:39 pm #1359048
    Rikard

    Hi,

    Thanks for that. So which image is it that you are trying align? If it’s the bottom one, then it might be better if you place it under the section, then give it negative top margin.

    Best regards,
    Rikard

    July 21, 2022 at 7:12 pm #1359060
    envisageiam

    I was able to get the image to work correctly by using a full width slider and move the bottom button up with the negative margin as suggested. Thank you!

    Can I also move just the logo down? Right now if I add a margin to the color section the logo is in it a blank space to the top of the entire section.

    July 21, 2022 at 7:52 pm #1359073
    Rikard

    Hi,

    Thanks for the update. Are you looking to move the logo down, overlapping the first section? If not, then please try to explain your intentions a bit further, or post another screenshot highlighting them.

    Best regards,
    Rikard

    July 21, 2022 at 8:26 pm #1359080
    envisageiam

    Yes, I would like to move the logo down so it overlaps the full width slider below it. The way it is shown in the previous screen shot that I sent.

    July 21, 2022 at 9:08 pm #1359087
    Rikard

    Hi,

    Please try this CSS as well:

    #av_section_1 .container {
    z-index: 2;
}

#margin-top-25px img {
    margin-bottom: -50px;
}

    Best regards,
    Rikard

    July 21, 2022 at 9:24 pm #1359088
    envisageiam

    That worked perfectly, thank you.

    On desktop there is a large space where navigation bar would be. I have it turned off for the page. On mobile the spacing is showing correctly. How can I adjust that spacing for desktop?

    Thank you for your help. I am grateful for your time.

    July 21, 2022 at 10:15 pm #1359095
    Rikard

    Hi,

    Please try this CSS as well:

    .html_header_transparency #top .avia-builder-el-0 .container {
    padding-top: 0;
}

    You might want to consider only applying it to the page in question though, if you intend to keep the normal behaviour on other pages.

    Best regards,
    Rikard

    July 21, 2022 at 10:18 pm #1359099
    envisageiam

    That worked great. Thank you!

    July 22, 2022 at 3:35 am #1359122
    Nikko

    Hi envisageiam,

    I’m glad that Rikard could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Top or Bottom Align Image To Color Section’ is closed to new replies.