Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 18, 2020 at 8:07 pm #1261359
    Ben

    Hi,

    Thanks in advance for your great support with this theme.

    I’ve got a mobile-specific version of services icons on my frontpage but there’s a 1px horizontal line appearing between grid cells. I’ve tried setting border:0 but it didn’t get rid of it.

    Here’s the custom CSS I’ve got: 

    .av_promobox { margin-top: 0px; }

/*----------------------------------------
// Grid cell gap
//--------------------------------------*/

@media only screen and (min-width: 990px) {
  #icons-grid .flex_cell {
      border-width: 24px!important;
      border-right-width: 0px!important;
      border-bottom-width: 0px!important;
      border-style: solid!important;
      border-color: #FFF!important;
}

#icons-grid .flex_cell:last-child {
    border-right-width: 24px!important;
}
/*----------------------------------------
// CSS - Separator Styles
//--------------------------------------*/

/* Dotted line */
.hr-inner {
    border: 2px dashed;
}

.special_amp {
    font-family: initial !important;
}

    Thank you so much!

    November 20, 2020 at 7:24 am #1261717
    Rikard

    Hey ChichesterDesign,

    Please assign a class to the 4/5 cells in the element options, for example right-column. Then add this to Quick CSS:

    @media only screen and (max-width: 767px) {
.page-id-443 .right-column {
    width: 85%;
}
}

    Best regards,
    Rikard

    November 20, 2020 at 12:01 pm #1261758
    Ben

    Hi Rikard,

    Unfortunately, that hasn’t worked. It’s just removed the last 4/5 cell. The issue with verticle gap between grid cells on mobile seems to only happen on Android not iOS devices as far as I can tell.

    Many thanks in advance,

    November 21, 2020 at 9:49 pm #1261999
    Victoria

    Hi ChichesterDesign,

    You have an error in the css above. One closing bracket is missing. It should be closing the media query like this:

    

/*----------------------------------------
// Grid cell gap
//--------------------------------------*/

@media only screen and (min-width: 990px) {
  #icons-grid .flex_cell {
      border-width: 24px!important;
      border-right-width: 0px!important;
      border-bottom-width: 0px!important;
      border-style: solid!important;
      border-color: #FFF!important;
}

#icons-grid .flex_cell:last-child {
    border-right-width: 24px!important;
}
}

    and then Rikard’s code should work on your end.

    Best regards,
    Victoria

    November 23, 2020 at 1:34 pm #1262365
    Ben

    Hi Victoria,

    I’ve corrected the CSS error in the CSS above but it’s still not working. Could you have another look, please?

    Many thanks in advance,

    November 23, 2020 at 10:54 pm #1262510
    Victoria

    Hi ChichesterDesign,

    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 (max-width: 767px) {
  #top.page-id-443 .right-column.av_four_fifth  {
      width: 85%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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