Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 6, 2022 at 11:22 am #1360897
    DianaLoola73

    Dear support team

    For the website, I use a grid row with an image element in the right column at the following point: https://meine-achtständigkeit.de/kurs-achtständig-hamburg/#achtkeit-stress

    The vertical alignment of the cell with the image is “middle”. This also works beautifully on the desktop. Only on the tablet landscape format, where the columns should also be displayed next to each other, do the two image elements hang tiny in the middle of the text section and that is not what we wanted: (see https://meine-achtsamkeit.de/support/tablet-quer.png)

    – on the one hand I have the question why the rear (larger) image on the tablet is displayed so small and
    – On the other hand, I would like the tablet landscape format to have the images “up” as the vertical orientation.

    (The element works again on the tablet in high format and on the mobile phone, I have it displayed one below the other there)

    Best regards Diana

    August 6, 2022 at 11:50 am #1360900
    Rikard

    Hey Diana,

    The screenshot is working, but the link you posted is not, please check the URL. I’m not sure that I fully understand what you are looking to achieve and on which screen resolutions, so if you could try to explain your intentions a bit further, then that would be appreciated.

    Best regards,
    Rikard

    August 6, 2022 at 11:51 am #1360901
    DianaLoola73

    Sorry, here is the correct link: https://meine-achtsamkeit.de/kurs-achtsamkeit-hamburg/#achtsamkeit-stress

    August 6, 2022 at 5:16 pm #1360925
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
.flex_cell.av-16do6c8-f1fb92f96cb985ed762e2e46a16b73b7 {
    vertical-align: top;
}
}

    Best regards,
    Rikard

    August 7, 2022 at 7:22 am #1360971
    DianaLoola73

    Hello Ricard,
    thank you for your edit.
    Unfortunately the script doesn’t work, there is no change.
    Many greetings, Diane

    August 7, 2022 at 10:49 am #1360982
    Rikard

    Hi,

    Try this CSS instead:

    @media only screen and (max-width: 1024px) {
.flex_cell.av-16do6c8-f1fb92f96cb985ed762e2e46a16b73b7 {
    vertical-align: top !important;
}
}

    Best regards,
    Rikard

    August 12, 2022 at 10:06 am #1361517
    DianaLoola73

    Unfortunately, the script also does not work with the addition “!important;”
    The view on the tablet is still like this: https://meine-achtsamkeit.de/support/tablet-quer.png

    The cell of the gridrow has the class “cell1”. I then tried to change your script as follows:
    @media only screen and (max-width: 1024px) {
    .flex_cell.cell1 {
    vertical-align: top !important;
    }
    }
    But that doesn’t work either.
    Do you know another possibility?

    Best regards Diana

    August 12, 2022 at 10:42 am #1361522
    Rikard

    Hi,

    The CSS you added yourself to the cell1 class is working on my end, maybe you could try the same thing with the other one?

    Best regards,
    Rikard

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