Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 5, 2015 at 6:24 pm #455232
    GOWD

    Hi, on the website listed in Private Content I have a full width image contained in a single column grid row.
    The image is of 20 teachers.

    When I placed the image on the lower part of the Homepage everything works fine.
    On mobile devices it resizes fine and the gap between it and the next element down remains constant.

    But when I used the same image and element setup on the Teachers page it creates a large gap below it when you re-size the browser or view that page on a mobile device.

    I have opened both elements on two screens side by side and gone through every setting and they are exactly the same.
    I have provided an admin login in the private content if you could have a look.

    Thanks.

    June 6, 2015 at 6:21 am #455387
    Rikard

    Hi GOWD!

    You’ve put it inside a grid row with the minimum height of 384, that is what’s causing it.

    Please try to add the following to Quick CSS under Enfold–>General Styling:

    
@media only screen and (max-width: 767px) {
.page-id-24 .avia-builder-el-3 {
  height: auto !important;
  min-height:  auto !important;
}
}

    Please adjust the media query size (767px) to the size you find appropriate.

    Cheers!
    Rikard

    • This reply was modified 9 years, 5 months ago by Rikard.
    June 8, 2015 at 1:12 pm #456045
    GOWD

    Hi Rikard, thanks for that, I just removed the 384 minimum height and that fixed it. You may close this thread.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Grid Row causing large page gap’ is closed to new replies.