[Resolved] Box size in View is not consistent due to length of taxonomies

[Author]

Posts

[petrC-2]

Hi team,

I have achieved nearly everything in terms of designing the Search View. Last thing I can't figure out is how to keep those boxes the same height, no matter if there is one or two lines of taxonomies. Please can you guide me? (See the attached picture)

Tell us what you are trying to do?
Directory website

Is there any documentation that you are following?
Nothing found

Is there a similar example that we can see?
Not sure

What is the link to your site?
hidden link - under development

[Nigel]

Hi there

If you want the grid items to be equal height there isn't a setting for that, but it can be achieved with a little CSS.

I can't access your site to verify how the markup looks on that page, but this would ordinarily work:

.tb-grid .tb-grid-column,
.tb-grid .tb-grid-column .wpv-block-loop-item {
    height: 100%;
}

You'll note that the View block settings includes a section for custom CSS where you can add that.

[petrC-2]

Hi Nigel,

I have added your code to the additional CSS section of the Astra theme (check the picture) and it is working.

Please could you help me to adjust the button position?

Kind Regards
Petr

[Nigel]

Hi Petr

We'd need to be able to inspect the markup on the front end to try and identify a solution, but the site is under construction.

Let me set a private reply and that way we'll be able to log in and then visit the front end to inspect the page.

We shouldn't need to make any changes to your site, but please ensure you have an up-to-date backup in any case.

You may want to create a temporary admin user for us to use that you can later delete.

Which page are your screenshots from?

[Minesh]

Can you please check now: hidden link

I've added the container block and moved the fields inside the container block and also added the min-height for the container block for inter content.

As you can see with the following screenshot:
- hidden link

[petrC-2]

Hi Minesh,

It's a big improvement. But I am still not happy. I would like to tidy up the look of the grid items. Please check attached images, they will explain exactly what I mean.

Thank you very much for your help!

Kind Regards
Petr

[Minesh]

Can you please check now: hidden link

I've added each field to its own container block as you can see with the following screenshot and to each container I've assign the class name "con-heading": hidden link

Added the "con-heading" class CSS to your view's custom JS and CSS section:

.con-heading {
display: flex;
align-items: center;
}

More info:
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view

I hope the solution shared will help you to resolve your issue.

[petrC-2]

Absolutely fantastic. The containers are like a magic 🙂

Thank you very much for your help!!!

Kind Regards
Petr