Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 12, 2019 at 12:02 am #1126683
    Jasmer

    Hello!

    There are a set of cells on the page below.

    The top one has a video element inside.

    For some reason, even though I set all padding to zero, there is a grey bar below the padding. (see annotated screenshot)

    The grey bar is the background color I added to show how the cell does not conform to the dimensions of the video.

    How do I make the cell (and the one to the left of it) snap to the size of the video?

    I do not want any background showing, I want the video to fill the cell 100% on all sides.

    Of course, the cell to the left of it should change as well to match dimensions.

    I’ve tried editing all cell and content settings, nothing changes. CSS?

    Thanks!

    August 12, 2019 at 6:54 pm #1126909
    Victoria

    Hey Jasmer,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 1100px) {
  #av-layout-grid-1.av-layout-grid-container {
    margin-bottom: -20px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 12, 2019 at 7:24 pm #1126924
    Jasmer

    Hi,

    The grey bar still appears on the mobile site, but the grey bar also appears when resizing the window on desktop site. I understand it has to do with the dimensions of the video. The CSS helped the desktop site though, and I would like to do what I can on the mobile site as well if possible. Any thoughts on that?

    Thanks

    August 18, 2019 at 12:00 am #1128517
    Mike

    Hi,
    Sorry for the late reply, and thanks for the link and screenshot.
    You are correct that this has to do with the aspect ratio of the video, if it was an image we could use background-size: contain to adjust better. Another issue is that the video is in an “iframe” so we can only adjust the container of the iframe and not the container that is in the iframe, which holds the video.
    But this css should help for mobile:

    @media only screen and (max-width: 767px) { 
#av-layout-grid-1 .avia-video {
	margin-bottom: 0 !important; 
}
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    August 21, 2019 at 9:49 am #1129514
    Jasmer

    Hi! Thanks for the help that did the trick! Last question. Is there a way to combine these two CSS? Or should they stay separate?

    @media only screen and (min-width: 1100px) {
  #av-layout-grid-1.av-layout-grid-container {
    margin-bottom: -20px;
  }
}
    @media only screen and (max-width: 767px) { 
#av-layout-grid-1 .avia-video {
	margin-bottom: 0 !important; 
}
}

    Thanks,
    Jas

    August 21, 2019 at 9:58 am #1129518
    Victoria

    Hi Jas,

    They should stay as they are, they work for different screen sizes and should stay separate.

    Best regards,
    Victoria

    August 21, 2019 at 10:02 am #1129520
    Jasmer

    Thanks Victoria! Resolved

    August 21, 2019 at 5:25 pm #1129647
    Victoria

    Hi Jasmer,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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