Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 29, 2019 at 7:02 pm #1084716
    restube

    Hey All,

    on one of my pages I use a Grid row with 3 columns for desktop.
    For mobile I need to hide the middle column. When i do that, theres a lag gap between 1. and 3. column.
    Can you tell me how to remove it?

    See yourself:
    support

    April 1, 2019 at 6:21 am #1085279
    Nikko

    Hey restube,

    Try adding this css code in Quick CSS, located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #top.page-id-337 #av-layout-grid-1 .av_one_third.avia-builder-el-10 .av-special-heading.av-special-heading-h2 {
    margin-top: 0 !important;
  }
}

    Best regards,
    Nikko

    April 1, 2019 at 2:00 pm #1085512
    restube

    Hey Nikko,

    thanks for your help. The css did not completely remove the space between the tow elemets. The gap ist still there.

    Further on this pages are two more copies of the same element only with different content. Your code only affects only 1 of the 3 elements. On our Website are a total of 8 pages with 3 of the elements with the “gap” making it 24 in total. How can I apply the code for all of them at once ?

    Cheers
    Dennis

    April 1, 2019 at 2:24 pm #1085531
    Nikko

    Hi Dennis,

    Try using this css code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
  #top.page-id-337 #av-layout-grid-1 .av_one_third.avia-builder-el-6 {
    padding-bottom: 0 !important;
  }

  #top.page-id-337 #av-layout-grid-1 .av_one_third.avia-builder-el-10 {
    padding-top: 0 !important;
  }

  #top.page-id-337 #av-layout-grid-1 .av_one_third.avia-builder-el-10 .av-special-heading.av-special-heading-h2 {
    margin-top: 0 !important;
  }
}

    Best regards,
    Nikko

    April 1, 2019 at 3:02 pm #1085546
    restube

    Hey Nikko,

    thanks for your quick reply.

    The first gap is completely gone. However, the remaining two on this site are still unchanged.

    Can we maybe use custom css classes to tackle the issue on the remaining 8 pages?

    Cheers

    April 2, 2019 at 1:22 am #1085771
    Nikko

    Hi restube,

    Yes, please do add a custom class for them so it’s easier to group them and we could use that to target them specifically.

    Best regards,
    Nikko

    April 3, 2019 at 7:04 pm #1086652
    restube

    Hey Nikko,

    I have created a custom css class for all of them (target-group). Can you pls show me the css that i need to add?

    Cheers!

    April 4, 2019 at 5:16 am #1086740
    Nikko

    Hi restube,

    I tried to check your site but it seems to be messed up (screenshot in private content).
    This should be the code you can use, just replace the className:

    @media only screen and (max-width:767px) {
  #top #main .className .av_one_third.avia-builder-el-first {
    padding-bottom: 0 !important;
  }

  #top #main .className .av_one_third.avia-builder-el-last {
    padding-top: 0 !important;
  }

  #top #main .className .av_one_third.avia-builder-el-last .av-special-heading.av-special-heading-h2 {
    margin-top: 0 !important;
  }
}

    Best regards,
    Nikko

    April 9, 2019 at 10:06 am #1088603
    restube

    Hey Nikko,

    the website should be fixed now.

    I`ve tried your code but im not sure I implemented it correctly.
    Can you tell which elements I have to give a custom class?
    Is it the Grid row or the elements within or something else?

    That would be very helpful.

    Thanks!

    April 9, 2019 at 3:41 pm #1088683
    Nikko

    Hi restube,

    Glad to hear that :)
    Give a Custom Class Css to the Grid Row.

    Best regards,
    Nikko

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