Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 29, 2020 at 11:35 am #1217662
    elenapoliti

    Hi I have in front page a color section 100% min-width with #ava-content-align-top and css

    #top #ava-content-align-top .container .content {
  vertical-align: top;
  padding-top:10px!important;
}

    Within it I have 3 flex columns (with class = .ava-home-page-flex-column-border and set as equal height /vertical align top) containing : title / text / square image . The square image has class = .home-image
    I need them to be all aligned top (equal height top), but also that images may stay all aligned bottom in case text length is different among the 3 columns. I am trying with position:relative / bottom:0 for the .home-image container but it doesn’t work.

    I see that if a put the image in a different column (hence having 2 rows of 3 columns each) the result is what I expect, but it’ s not a solution when viewed on the mobile. I would like to avoid having two different sections (one for desktop and one for mobile view).

    Do you have a solution in case?

    May 31, 2020 at 6:58 am #1218135
    Rikard

    Hey Elena,

    Could you post a link to where we can see the results you are getting please? If you have a screenshot highlighting your intentions then that would help too.

    Best regards,
    Rikard

    May 31, 2020 at 8:47 am #1218144
    Guenni007

    do the image containers have links?
    do they all have links? – anyway

    I thought it might be done in your way – but it is harder to reach than i can imagine. Maybe a Mod knows an easier way.
    I only got a solution with 3 nested flex containers.

    you can see all on this page: https://webers-testseite.de/elenapoliti/
    css code and alb layout including.

    Do not choose the columns to be equal height on Enfold ! – we will do that with flex settings.
    In that color-section with your setting – do not place additional Elements in it – not even separators.
    Inside the columns you can place other elements – the image has to be the last one.

    Notice:     I would only do these settings to be active for non-responsive case. Depends on your settings
    Synchronize the breakpoint of the columns with that rules: Edit column – Row screen options – Fullwidth Break Point

    • This reply was modified 4 years, 1 month ago by Guenni007.
    May 31, 2020 at 11:17 am #1218159
    elenapoliti

    Hi Guenni007 your solution worked as charm!! I am not so familiar with flexbox, hence thanks also for the guide you posted in your link. I will study it.
    Problem solved!

    June 1, 2020 at 1:31 pm #1218423
    Rikard

    Hi elenapoliti,

    Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.