Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1003548

    Hi there

    I’m having great difficulty adding a gap where the red arrow is on the enclosed image. It affects lots of pages but here’s the example I refer to:

    Screenshot of gap issue between headings in grid row box

    It’s only a problem when on a small screen in responsive mode. Try it on a smartphone and you’ll see the issue.
    I tried this code but whilst sorting the problem it sent all manner of other things haywire!!!

    @media only screen and (max-width: 767px)
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
        margin-bottom: 20px;

    I also isolated .responsive #top #wrap_all .flex_column but still the same – problem fixed with the 20px margin but then my other columns and portfolio columns went wrong!
    Any ideas would be appreciated.


    Hi Ed,

    Please try adding a class to the element in question, if you don’t have that option active you can activate it under Enfold->Layout Builder (Show element options for developers). Add a class called second-col for instance, then you use this in Quick CSS:

    @media only screen and (max-width: 767px) {
    .second-col {
      margin-top:30px !important;

    Best regards,


    Thank you Rickard
    Works great now that I figured out where to place the snippet (after creating the CSS class).
    Thank you for your help – one to bear in mind for the future!
    Kind regrads


    Hi Ed,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    Thanks Rikard – you can close this now – thank you !!!!



    Glad we could help!

    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Add padding to gridspecial heading box’ is closed to new replies.