Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 6, 2022 at 5:29 pm #1339186
    markus-fischer

    Hello,

    I have 2 columns next to each other – one larger column with text and then an image in the other one. I want the image to be in the center/middle of the text’s column height. The correct setting thus is “Row Layout” > “Equal Height” and “Middle” from my understanding and it works perfectly on Desktop.

    However, this setting results that on Mobile there is too much space before the text column, even though it’s the larger column and it shouldn’t affect the space to the content above. Please see the screenshot attached – you can see there’s too much space between the heading and the text.

    How can I resolve this?

    Many thanks,
    Markus

    February 6, 2022 at 7:12 pm #1339197
    Mike

    Hey markus-fischer,
    Thank you for the link to your site, but since your screenshot requires a login so we can not see it.
    Please try using an open image host to show your screenshots so we can see them.
    I looked at your page as mobile but I don’t see any extra space, please see the screenshot in the Private Content area below, perhaps try including a screenshot with some markup pointing out the extra space.

    Best regards,
    Mike

    February 6, 2022 at 10:49 pm #1339224
    markus-fischer

    Hey Mike,

    Please see the screenshot attached now, hope it works this time.

    The extra space is showing on Mobile between the heading “Case Study” and the text below for instance. The extra space appears basically everywhere on Mobile where I apply the setting “Row Layout” > “Equal Height” and “Middle”, even though this should only affect Desktop / Tablet. (My goal is to show the image – so for instance the graphic of the Golden Gate Bridge under “Case Study” – vertically in the middle on Desktop / Tablet).

    Thank you again, I look forward to hearing what you think :)

    February 6, 2022 at 11:13 pm #1339233
    Mike

    Hi,
    Thanks for the screenshot, but I see the same 50px top margin for desktop & mobile, please see the screenshots in the Private Content area.
    If you would like to remove this for mobile try this css:

    @media only screen and (max-width: 767px) { 
	#top #main .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
    margin-top: 0px;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 6, 2022 at 11:24 pm #1339236
    markus-fischer

    Hi Mike,

    Thank you, that code works well!

    Where can I actually adjust the 50px margin? I looked for it under “Column” > “Margin”, however cannot see that it can be adapted there.

    Best regards,
    Markus

    February 7, 2022 at 12:08 am #1339243
    Mike

    Hi,
    Look at Column ▸ Row settings ▸ Row margins ▸ Custom top and bottom margin and set to zero, the 50px is default
    2022-02-06_012.jpg
    Best regards,
    Mike

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