Removing Borders in ‘Our Focus’ Section – Zerif Lite

Please provide a link to a page on your site where we can see this. Thanks.

Hi there Steve,

So sorry, I should have provided a link to begin with! the site is: https://myptbox.com/

When you go to the ‘Our Focus’ section now titles ‘How myPTBOX Works’ when you hover over the images a border overlaps the image, do you have any idea how that get rid of those? On mobile the borders are there permanently and I would like the images to be totally border-less.

Also, do you know how to slightly increase the distance between the 3 steps?

Thanks a lot in advance,
Jonathan

• This reply was modified 7 years, 10 months ago by myptbox.

This is the CSS that does it:

#focus span:nth-child(4n+1) .focus-box .service-icon:hover, #focus span:nth-child(4n+1) .focus-box .service-icon:focus {
    border: 10px solid #e96656;
}

So to get rid of the borders:

#focus span:nth-child(4n+1) .focus-box .service-icon:hover, #focus span:nth-child(4n+1) .focus-box .service-icon:focus {
    border: none;
}
.focus-box .service-icon {
   border:none;
}

To add CSS: If you are using WordPress 4.7, use the “Custom CSS” option in the customizer. If your theme has a custom CSS option, use that to add the CSS shown above. If not, install the plugin Simple Custom CSS. Or, if you have Jetpack installed, enable its Custom CSS module.

Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

The developers and users of your theme would be the best people to ask additional questions. You can reach them here:

https://www.ads-software.com/support/theme/zerif-lite/

Hi Steve,

This is great! It removed the borders on all three steps, however on step two and three they still appear when I hover over them. Is there some additional code I can enter to rectify this?

Thanks a lot for your help, you’re a star,
Jonathan

.focus-box .service-icon:hover { border: none; }

Steve,

I was just being lazy, I’ve figured it out.

}
#focus span:nth-child(4n+1) .focus-box .service-icon:hover, #focus span:nth-child(4n+1) .focus-box .service-icon:focus {
border: none;
}
#focus span:nth-child(4n+2) .focus-box .service-icon:hover, #focus span:nth-child(4n+2) .focus-box .service-icon:focus {
border: none;
}
#focus span:nth-child(4n+3) .focus-box .service-icon:hover, #focus span:nth-child(4n+3) .focus-box .service-icon:focus {
border: none;
}
.focus-box .service-icon {
border:none;

All images no longer have a border! Thank you for your swift response, very happy.

Thanks again,
Jonathan