Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 13, 2020 at 2:42 pm #1192888
    dgvicario

    Hi there,
    I’m using a headline rotator element and I have created designs for desktop, tablet and mobile using the feature of hiding the element visibility. For all of them I have set the height of the grid element to 400px because the number of lines of the rotator varies from 2-4 depending on the device width and I don’t want the size of the element changing depending on the number of lines because it’s annoying. And it mostly does the trick. However, this doesn’t work with very small devices, with a width of less than around 320px.

    With the element visibility I can’t control this, but it would be great if I could just change the height of the grid element only for this element and not for all the grids. I was wondering if I could use a custom css class on the element developer settings. Or maybe you can come up with a better solution.

    Here’s a link with a video of the issue:

    You can also see the link to the web on the private content box.

    Thanks in advance.

    March 13, 2020 at 8:50 pm #1192988
    Victoria

    Hey dgvicario,

    It looks the same on my end, nothing out o the ordinary, not so much extra whitespace. Actually, space above and below looks more or less equal and balanced.

    https://share.getcloudapp.com/7KuRQXle Well, the top and bottom paddings can be decreased.

    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 (max-width: 479px) {
  .responsive #top #wrap_all #presentacion.av-flex-cells .no_margin {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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