Skip to content

How to color the Our Focus features on mobile

By default, on mobile devices, the Our Focus features boxes are colored only after clicking on them. If you want the color to be there all the time, just follow this doc.

Go to  Appearance > Customize > Additional CSS and add the following code:

@media screen and (max-width: 480px) {
  #focus span:nth-child(4n+1) .focus-box .service-icon {
      border-width:10px;
      border-style: solid;
      border-color: #e96656;
  }
  #focus span:nth-child(4n+2) .focus-box .service-icon {
      border-width:10px;
      border-style: solid;
      border-color: #34d293;  
  }
  #focus span:nth-child(4n+3) .focus-box .service-icon {
      border-width:10px;
      border-style: solid;
      border-color: #3ab0e2; 
  }
  #focus span:nth-child(4n+4) .focus-box .service-icon {
      border-width:10px;
      border-style: solid;
      border-color: #f7d861; 
  }
}