Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #619266

    I have full width image on the homepage and i have navigation icons on the image.

    I want the icons to be at the bottom of the image; not on the middle.

    Color Section has At least %100 of Browser Window height that allows me full-size image but Color section do not have Vertical alignment. inside columns are set to be always in the middle position.

    avia-section.av-minimum-height .container .content {
    vertical-align: middle;
    float: none !important;
    }
    I gave custom Custom Ids to the column and set it vertical-align: bottom !important; This does not work.

    Only Grid Row (Vertical Align: buttom) works but then i cant make the background image %100 browser height :)

    #621070

    Hi cbehen,

    Sorry for the late reply, it looks like we have to be logged in to be able to see your site? Please post admin login details in private and we’ll have a closer look.

    Best regards,
    Rikard

    #626435

    Hello Rikard,

    My problem is setting the columns inside the color section to the top or to the button, but they are always on the middle.

    For example: on the main page navigation icons are on the middle it needs to be at the bottom always.
    (vertical-align: bottom or margin-bottom=0px, whatever it works)

    If you can give one example how to do it, I can do the rest of the pages that needs it.

    Best Regards

    Cihan

    #626922

    Hi,

    It looks like you done a few customisations there, if you want to align the list further down you can try putting padding on top of the li elements:

    .about-nav__list li {
    padding-top: 100px !important;
    }

    Thanks,
    Rikard

    #627023

    Hello Rikard,

    İt is not about the custom codes. If you have full width picture as background; columns content inside the color section is always at the middle because of this code :

    .avia-section.av-minimum-height .container .content {
    vertical-align: middle;
    }

    Please look at the this page : http://www.egezon.com/digital-marketing/

    I couldn’t find a way to get around this

    These codes do not work:

    .page-id-698 #digital-marketing-banner .avia-section.av-minimum-height .container .content{
    vertical-align: top !important;
    }
    or
    .page-id-698 .avia-builder-el-24 .container {
    vertical-align: top !important;
    }

    I have to point directly to the section color and make it align its content to the top.

    [IMG]http://i67.tinypic.com/120p7dc.jpg[/IMG]

    Best Regards

    #628275

    Hello,

    It is solved by this code

    .page-id-698 #digital-marketing-banner.avia-section.av-minimum-height .container .content {
    vertical-align: top !important;
    }

    so on specific page, on any color section we can align its content to the top or to the bottom.

    there shouldn’t be any white space between id and class. (I did this mistake and I thought code is not working :)))

    #digital-marketing-banner.avia-section (this is the correct writing)

    Thanks

    Cihan

    #628525

    Hi,

    Great! Glad it worked. :)

    Best regards,
    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Columns inside the Color Section do not Vertical-Align to the bottom.’ is closed to new replies.