Block Element - Square Blog Archive

Hi Kylie,

To clarify:

Do you want the entire contents of a post item to be in a square container like this?
https://share.getcloudapp.com/kpu4mRY9

Or perhaps, you only want the images of the post items to be square?

Let us know. :)

Hi Elvin,

Thanks so much for your quick reply.

Yes similar to what you've shared. The overall look I'm trying to achieve is in the below screenshot, only with squares. Everything is the same size and in line with the one beside. I hope this makes sense?

http://www.forage-feed.com/wp-content/uploads/2022/01/Screen-Shot-2022-01-07-at-12.53.00-pm.png

I look forward to hearing from you :)

In that case we'll have to re-arrange the Block Element - Content Template you're using to make it conducive to turning it into a square.

Here's what you can do:

Currently, you have the Block Element set up like this:

Dynamic Image block
[ Container block ]
> GB Heading Block
> Dynamic Content block (for excerpt)
> GB Button Block.

You'll have to change the structure to this - https://share.getcloudapp.com/jkumn8lA

You then add this CSS:

.square-aspect-ratio {
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.square-aspect-ratio > * {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.square-aspect-ratio .featured-img-wrapper  {
    height: 70%;
    overflow: hidden;
}

.square-aspect-ratio .featured-img-wrapper img  {
    width: 100%;
    height: auto;
    object-fit: cover;
}

Thanks, Elvin.

Can you please confirm where I add the CSS? Under "Advanced CSS" for the container or via "Appearance" > "Customise" "Additional CCS"?

Neither seem to change the layout of the grid.

I look forward to hearing from you.

Appearance” > “Customise” “Additional CCS

This one is correct.

Neither seem to change the layout of the grid.

You'll have to add the class square-aspect-ratio on the main Container Block that holds all the contents.

Like this - https://share.getcloudapp.com/RBuyXA1p

And the featured image has to be wrapped in its own Container Block as well like w/ this -
https://share.getcloudapp.com/6quELoWL

Are there any other steps or something I've missed?

It still doesn't seem to be working.

Are there any other steps or something I’ve missed?

The container block holding the title should be inside the container block with the square-aspect-ratio class.

You can check the list view of the block element you're using if it matches the one in the screenshot - https://share.getcloudapp.com/jkumn8lA

Thanks, Elvin. The elements are matching the screenshot.

I accidentally placed the "square-aspect-ratio" in the HTML anchor not the Additional CSS class.

They are levelling out, but they're not quite squares. Is this what was intended or does the square also include the text?

They are levelling out, but they’re not quite squares. Is this what was intended or does the square also include the text?

The text is outside the container block w/ square-aspect-ratio as shown here - https://share.getcloudapp.com/8LupwNpm

While it may look the same order within the List view, there's a subtle difference in indentation that tells users if the block is inside another block.

For this one, the nesting is important.

Thank you so much for your help Elvin.

Wishing you a lovely day. :)

No problem. Stay safe! :)