Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 25, 2025 at 10:08 pm #1477950
    xfacta

    Hi there

    I have a 2 column row with text in one and a code block with a facebook video in the other. I have tried making the row settings individual height and equal height but on mobile the video column shows with a large gap at the bottom (as I have them in a colour section that is grey)

    is there any way to remove the gap at the bottom on the 2nd on mobile? Its the “What is True Love?” section

    February 26, 2025 at 7:51 am #1477990
    Ismael

    Hey xfacta,

    Thank you for the inquiry.

    You can add this css code to limit the height of the embedded video.

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

  /* Add your Mobile Styles here */
  #top .flex_column.av-6x5rog-a89aa535bbb4f44ff97f6d467f65c8b1 .avia_codeblock iframe {
    height: 200px;
    margin-bottom: -50px;
  }
}

    Best regards,
    Ismael

    February 26, 2025 at 7:58 am #1477993
    xfacta

    Thanks so much. That worked for mobile but now on desktop the video appears cut off at the bottom

    February 26, 2025 at 4:06 pm #1478025
    Rikard

    Hi,

    Thanks for the update. Are you sure that you copied the whole snippet that Ismael posted? It should only apply to mobile screens, but it applying to desktop sizes as well on your site.

    Best regards,
    Rikard

    February 26, 2025 at 10:01 pm #1478051
    xfacta

    Ah yes the other css for mobile was closed off so didnt recognise the code properly – all fixed thank you :-)

    February 27, 2025 at 6:04 am #1478077
    Ismael

    Hi,

    Great! Glad it’s fixed. Let us know if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Gap at bottom of 2 column row on mobile’ is closed to new replies.