All of the products on my home page are all linked to only one of the products on the bottom right of the collection (as shown in the video attached below). When hovering over the other products, none of them are clickable and when I click on them, they all link to the only product that seems to work regularly.
website: yepocosmetics.com
password: yepocosmetics
I’m happy to share my code if that will help
Hi @djo98769 this is a CSS issue.
Always backup themes before changing files.
There is an excess right curly bracket , } , at the top of your themes component-card.css file.
Delete that and all should be normal.
CSS Issue Explanation: is the parse error makes the following important rule to cause it’s link overlays to go outside of it’s card parent element and spread over the entire section, and the last link in the section gets place over all other links which are also doing the same thing.
Do not modify this rule shown here as example only.
.card__heading a::after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
Works perfectly now, thanks!