Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 14, 2015 at 9:11 pm #379732
    hotspot

    Hi,

    We have a one page design, consisting of multiple color sections with images.
    We want to align a text area to the bottom of a color section.
    How do we achieve that?

    Regards,
    Julia

    January 15, 2015 at 6:07 pm #380220
    Elliott

    Hey hotspot!

    You can add a separator element above the text and set it’s style to whitespce to move it down.

    Cheers!
    Elliott

    February 21, 2015 at 6:16 pm #400098
    hotspot

    Hi Elliot,

    We need t align the element to the bottom. So added the seperator element and wanted to set it to 100% to totally push it down, unfortunately its not possible to use % values for the spacing.

    Any ideas?

    February 23, 2015 at 11:58 am #400545
    Yigit

    Hey!

    Can you post the link to your page please?

    Regards,
    Yigit

    February 23, 2015 at 12:06 pm #400552
    hotspot
    This reply has been marked as private.
    February 23, 2015 at 12:21 pm #400569
    Yigit

    Hi!

    Please try adding following code to Quick CSS 

    .page-id-16 #av_section_3 .avia-builder-el-19 {
height: 584px;
}
.page-id-16 #av_section_3 .avia-builder-el-19 .av_textblock_section {
bottom: 0;
position: absolute;
}

    Regards,
    Yigit

    February 23, 2015 at 12:32 pm #400582
    hotspot

    Hi Yigit,

    That ofcourse works but then its hard coded.
    We need this to be possible on every page, and with an background image of any different height.
    Ideal, would be to give the item a cladd or id something like: .elementx-align-bottom
    Another preference would be to align an item to the middle (if possible).

    Any ideas?

    February 24, 2015 at 5:25 am #401177
    Rikard

    Hi!

    Just to be sure what you are trying to achieve here, you want to align the two yellow boxes on the last image with each other on the same line, right?

    Regards,
    Rikard

    February 24, 2015 at 9:04 am #401218
    hotspot

    Hi Rikard,

    No, sometimes i need to align a box to the top (like it is now) of the background image, and sometimes i need to align a box to the bottom of the background image.

    Also we would love to be able the align a box to the middle of the image (vertical align).

    February 25, 2015 at 12:47 pm #401997
    Yigit

    Hey!

    Please feel free to request such feature here – https://kriesi.at/support/enfold-feature-requests/
    To achieve what you would like with hardcodding, you can add elements on top of your element to push it down and hide the element you added on top using custom CSS code ( kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) as following 

    .your-custom-class { opacity: 0; }

    Regards,
    Yigit

    February 16, 2017 at 8:22 pm #748123
    webWahine

    Hello
    I’m trying to do the same with just one image in my 1st section and have tricked it a bit by adding in whitespace above but would prefer to have my image in the first section 50px right and 50px up from the bottom of the first section, which is set to 100% height, plus I’ve changed the site dimensions to 100% so it looks close but I’d rather code just that one element.

    I am trying to locate the area that holds the img and tried this, looking at the code above, with extra styling just to see if I am in the right place and it appears no as it’s not taking effect. I’m guessing that it’s section_1 but when I inspect it doesn’t show up as section_1 so I tried other id’s and classes but can’t seem to get it to apply –

    .page-id-66 #av_section_1 .avia-builder-el-6 {
    height: 100px;
    /* just for testing */
    border:10px solid #6f9136;
    background: #ff3300 !important;
    }

    .page-id-66 #av_section_1 .avia-builder-el-6 .avia_image {
    bottom: 50px;
    right: 50px;
    position: absolute;
    /* just for testing */
    background: #ccc !important;
    }

    Could you please identify the correct path in css to the both section element, and the image I have placed inside.

    Thanks!

    February 16, 2017 at 8:27 pm #748125
    webWahine

    Another quick note – I had to revert back to 1310px dimension width because it’s thrown off all of the other styling so I definitely need to hard code that one image to be 50px in bottom right of that section, please :)

    February 22, 2017 at 9:50 am #750354
    Ismael

    Hi!

    Instead of using the generic selectors, please turn on the custom css class field so that you can apply a unique selector to the element.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    And the color section also has a Section ID field.

    Cheers!
    Ismael

    February 22, 2017 at 8:19 pm #750644
    webWahine

    Oh, that’s a much better way of doing it! Thanks so much. I know that you have a requests area but by default it would be great to have this – I do a lot of custom styling :)

    February 24, 2017 at 4:06 am #751189
    Ismael

    Hey!

    Great! Now you can do these modifications with ease. Enjoy! :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘color section – alignment object’ is closed to new replies.