My issue is that my “like” heart link is being covered by padding from the container which is used to push the category item to the right enough to display the heart so that they don’t overlap. In my example above, it’s a little different than my real code. My real code is using an image for the heart (I’m duplicating this technique for the like: https://codepen.io/mindstorm/pen/aZZvKq) but I couldn’t include it in the fiddle because I’ve resized the heart so that it works in my design and I didn’t know how to include it in the fiddle. That said, the final heart image is 50px by 50px and the only way I knew to position it was absolutely in order to line it up with the other content. Given that it’s absolutely positioned, I can’t click it because of the padding from the card-footer-left which pushes over the category.
That was my first thought as well, but adding z-index: 999; to the heart image doesn’t have any effect.
I kept seeing solutions online of z-index: -1; applied to the absolutely positioned item, but that didn’t work either. That simply makes the heart image disappear completely
I checked your JsFiddle and Codepen a while ago but I couldn’t see the issue. The blue heart is showing and it is linking too.
Screenshot:
Why is it AP? If I remove that it lines up with the category link better still.
Now if the image was 50px it would still line up if the links have vertical-align middle if I ubderstand the problem.
Have you tried that?
Just had a look on a computer and the link is working if you right click and open in a new tab. I don’t use jsfiddle but it looks like external links are not working.(codepen is much better )
If you click the heart in the JsFiddle, you should see that it doesn’t actually go anywhere. It’s linked, but does nothing. Or at least on my end it doesn’t.
Sorry, I knew this would be a tough one to put into words. So the heart itself isn’t 50px in height or width, BUT it has to be a 50px by 50px image to accommodate of the explosion effect that happens once clicked. Given that it’s 50px tall and the area that it’s located (in that sort of info section of the post next to the category), 50px is too tall for it to work in that area. So with absolute positioning, I take it out of the regular flow of the document and then position it where it fits so that the height doesn’t affect how tall the container surrounding it is. Hope that clears things up a bit. Thanks
The heart link in the fiddle does not navigate when clicked (I’ve tested chrome and Firefox PC & Mac). The link will work if you right click and open in a new tab or window. That seems to be the default for jsfiddle and you would need target=“_blank” to action a link.
However I assume this has nothing to do with the original problem unless the original code was in jsfiddle also.
I’m offline now until tomorrow afternoon so I will leave you in Erik’s capable hands
I used PaleMoon, a Firefox fork that goes its own way.
My Firefox block the outgoing link in the Jsfiddle, and so does Chromium and Brave, but that has nothing to do with the code. I think it’s the new browser shields.
Turns out that it was a jQuery issue that I mistook for a CSS issue. I had a similar CSS issue as this previously and was certain it was that. jQuery never entered my train of thought. Then, when I created the Fiddle and it seemed to have to same behavior, it only reassured me of the problem but instead, it turns out not being able to click links in Fiddle seems to be default.
I have it fixed now and sincerely apologize for sending you both on a wild goose chase!
Easily happens when you use those framework, especially when the platform you try to show the issue in doesn’t always show all the uncompiled css/javascropt correctly.
Thank you for telling.
[Off topic]
I didn’t liked Codepen from start because the automatic update of the code review, but since I discovered you nowadays can turn off the update I too have started using it. Wish all codepens were set to not auto update by platform default (authors can always change their defaults).
Jsfiddle has evolved too, like I no longer create updates by mistake when using the run shortcut.
