[Resolved] Blog layout as a grid using elements – block – content template

[Ying]

Seems you’ve already followed David’s instruction to add the class: container-link to the button block.

I just tested, the CSS David provided should work well.

Your suggested css turned off the links for everything including single post and lowered opacity.

The CSS doesn’t have the ability to do so.

Can you add the CSS in so I can take a look to see why it doesn’t work?

[Brad]

It’s in there now. See links / screenshot. It’s not working

https://www.dropbox.com/s/czb3nkt6g3nooml/IMG_7565.jpg?dl=0

[Ying]

I don’t see it’s been added to your site, can you clear cache?

Where did you add the CSS to?

[Brad]

https://www.dropbox.com/s/czb3nkt6g3nooml/IMG_7565.jpg?dl=0

[Brad]

Oh. Sorry. Added to customizer for quick test

[Brad]

Ok. Try now. Cleared cache again via swift plug-in

[Brad]

All this should be links too but the opacity is way down and the link aspect has been removed.

https://www.dropbox.com/s/hz4rd76vos3areb/IMG_4606.jpg?dl=0

[Ying]

So let’s do it step by step:

1. Set the container block’s (marked in the below screenshot) inner z-indexto 9,leave outer z-index blank:
https://www.screencast.com/t/Gu6rx5ZVPxOS

2. Add an additional CSS class buttons-container-link to the Buttons block(marked in the below screenshot) :
https://www.screencast.com/t/Gu6rx5ZVPxOS

3. Remove the additional CSS class container-link from the Button block:
https://www.screencast.com/t/4j8nLe1yGB4H

4. Change this CSS:

.container-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

to:

.buttons-container-link a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.buttons-container-link {
    z-index: 2;
    position: relative;
}

[Brad]

Other “ higher links” ( categories, tags, author) now are working but feature image as a LINK isn’t targeted yet; It’s not working as a link.

https://www.dropbox.com/s/d59lofr4h3p92jx/IMG_7566.jpg?dl=0

Feature image is a background image in a container on even level as the read more button I believe? I’m not that good at css and the inner z-index is throwing me here which is why I just tried to give everything its own class and z-index. That didn’t work though either.

[Ying]

You added the wrong additional CSS class, an sis missing from it, it should’ve been buttons-container-link not button-container-link
https://www.screencast.com/t/KZfYYXbrkMly

[Brad]

Thank you so much!!! I’m sorry. That was an idiot mistake on my part.

[Ying]

No worries 🙂

Hope it’s all working now!

[Brad]

Thanks. All working. Query loop for another day.

[Ying]

You are welcome 🙂

[Ying]

You are welcome 🙂

[Author]

Posts