Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 20, 2019 at 1:47 pm #1069455
    KyriK

    I have an icon-grid element with 2 rows of icons, and after testing the mobile version of the site, it appears that icons have too much empty space bettween each other. Any idea how to fix it?

    February 20, 2019 at 1:50 pm #1069456
    DigitalEssence

    Can you target them with a media query?

    @media only screen and (max-width: Number of pixels where it starts to not look rightpx) {
.selector {do something}
}
    February 20, 2019 at 6:50 pm #1069620
    Victoria

    Hi KyriK,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    February 20, 2019 at 7:11 pm #1069640
    KyriK

    here it is

    February 24, 2019 at 11:46 am #1070892
    Victoria

    Hi KyriK,

    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 (min-width: 479px) and (max-width: 1024px) {
  .avia-icongrid-numrow-3 li, .avia-icongrid-numrow-4 li, .avia-icongrid-numrow-5 li {
      width: 46%;
  }
  .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner {
      padding: 1em;
  }
  .avia-icongrid-flipbox li article {
    min-height: 100px !important;
  }
  #top .avia-icongrid-flipbox li {
      margin-bottom: 0px!important;
  }
}
@media only screen and (max-width: 479px) {
  .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner {
      padding: 1em;
  }
  .avia-icongrid-flipbox li article {
    min-height: 100px !important;
  }
  #top .avia-icongrid-flipbox li {
      margin-bottom: 0px!important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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