Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 7, 2020 at 3:12 am #1251006
    navindesigns

    https://balrajdesign.com/elev8/ – dev site

    1- In the top section with the 12 boxes, how can decrease the spacing between the columns?
    2- in that same top section with the 12 boxes, on responsive it does not render well, how can I show a 2×2 column on desktop always and 1×1 on mobile, currently it does not do that, please see screenshot here – https://ibb.co/6RJkT0X

    October 7, 2020 at 4:43 am #1251009
    Nikko

    Hi navindesigns,

    Thanks for giving us admin access.
    I have put boxes in the Color Section (with those 12 boxes) > Advanced > Developer Settings > Custom CSS Class.
    Then using that class, I have added this CSS code in Quick CSS.

    #top .boxes .flex_column_table .flex_column.av_one_fourth {
    width: 23.5%;
    margin-left: 2%;
}

#top .boxes .flex_column_table .flex_column.av_one_fourth.first {
    margin-left: 0;
}

#top .boxes .flex_column_table .av-flex-placeholder {
    width: 2%;
}

@media only screen and (max-width:959px) {
  #top .boxes .flex_column_table {
    display: block;
  }

  #top .boxes .flex_column_table .flex_column.av_one_fourth {
    display: block;
    float: left;
    width: 48%;
    margin-left: 4%;
  }

  #top .boxes .flex_column_table .flex_column.av_one_fourth:nth-child(5) {
    margin-left: 0;
  }

  #top .boxes .av-flex-placeholder {
    display: none;
  }
}

    If you need to use the same thing on other pages, just use the same settings and then put boxes as the Custom CSS Class.

    Best regards,
    Nikko

    • This reply was modified 4 years, 1 month ago by Nikko.
    October 7, 2020 at 4:01 pm #1251179
    navindesigns

    Thank you

    It seemed like the spacing between the boxes was only applied to the first 4

    The second and third column boxes still has the larger gap between the boxes.

    Screenshot
    Screen-Shot-2020-10-07-at-9-58-24-AM

    Thanks

    October 9, 2020 at 4:48 am #1251613
    Nikko

    Hi navindesigns,

    I apologize for that, I have added this CSS code in order to fix it on the 8 boxes below:

    @media only screen and (min-width:960px) {
  #top .boxes .flex_column.av_one_fourth {
    width: 23.5%;
    margin-left: 2%;
  }

  #top .boxes .flex_column.av_one_fourth.first {
    margin-left: 0;
  }
}

    Best regards,
    Nikko

    October 10, 2020 at 2:29 am #1251765
    navindesigns

    Thanks!! Looks great

    What break point does the boxes go 2 columns?

    It seems like this breakpoint, it is still 4 columns and does not look good

    screenshot
    Screen-Shot-2020-10-09-at-8-25-14-PM

    Thanks

    October 11, 2020 at 4:59 am #1251993
    Jordan Shannon

    Hi,

    Perhaps adjusting to the following would work:

    @media only screen and (min-width:1024px) {
  #top .boxes .flex_column.av_one_fourth {
    width: 23.5%!important;
    margin-left: 2%!important;
  }

  #top .boxes .flex_column.av_one_fourth.first {
    margin-left: 0!important;
  }
}

    Best regards,
    Jordan Shannon

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