Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 13, 2023 at 10:02 pm #1401082
    yannickokken

    We made a great website with Enfold. We only run into a few things in the mobile version of the website. I will create a number of different topics for this.

    Number 1 is that we run into the vertical alignment of headers in a column not working properly. On the desktop version they are neatly aligned, but on the mobile version all headers are glued to the top of the column.

    The strange thing is that if I clear the height field, and add a padding to make the column a bit bigger, for example, it aligns nicely. But then I have to rebuild all the columns that are used on more than 200 pages.

    The website is ceramicasa.nl and you can see an example of the blocks at https://ceramicasa.nl/tegels/ (with images in the columns) or https://ceramicasa.nl/merks/ (with texts in the columns )

    March 14, 2023 at 4:45 am #1401107
    Ismael

    Hey Yannick,

    Thank you for the inquiry.

    Are you using the same set of elements for these sections across the site? If yes, then adding the css code below should vertically align all Image elements inside a flex column.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .flex_column_table .flex_column .avia-image-container.avia-align-center {
    transform: translateY(-50%);
    top: 50%;
  }
}

    This might have unintended effects for other sections using the same of set of elements.

    Best regards,
    Ismael

    March 14, 2023 at 9:05 am #1401120
    yannickokken

    Hi Ishmael,

    It works for the images, but not for the headers like on https://ceramicasa.nl/merken/.

    But the question that comes to my mind is why it doesn’t work out-of-the-box. Why is that alignment ignored on mobile while it always works that way on the desktop, and in my experience has always worked that way with Enfold. I do not get that.

    March 15, 2023 at 4:29 am #1401204
    Nikko

    Hi yannickokken,

    On mobile devices, alignment is disregarded because it employs a block layout. Conversely, desktop uses a table layout, which is unsuitable for narrow layouts. Hence, the table layout is converted to a block layout on mobile.
    Please try to replace Ismael’s code with this:

    @media only screen and (max-width: 767px) {
  #top #wrap_all .flex_column_table .flex_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    March 22, 2023 at 7:55 pm #1402047
    yannickokken

    Tnx Nikko, this works

    March 23, 2023 at 12:12 am #1402059
    Mike

    Hi,
    Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mobile vertical alignment in columns’ is closed to new replies.