Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 21, 2016 at 5:08 pm #619266
    cbehen

    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 :)

    April 25, 2016 at 8:30 am #621070
    Rikard

    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

    May 3, 2016 at 1:58 pm #626435
    cbehen

    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

    May 4, 2016 at 6:58 am #626922
    Rikard

    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

    May 4, 2016 at 10:04 am #627023
    cbehen

    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

    May 6, 2016 at 1:39 pm #628275
    cbehen

    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

    May 7, 2016 at 3:49 am #628525
    Ismael

    Hi,

    Great! Glad it worked. :)

    Best regards,
    Ismael

  • Author
    Posts
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.