Topic Tag: Front-end display

Problem:
A Layout has a row with two columns. The columns have background colours and should be equal height, but typically one column is shorter than the other and the background colour does not extend to the bottom of the row.

Solution:
Simply applying display: flex to the parent row will by default make the child columns expand to the full height.

The Layouts grid is based on the Bootstrap 3 grid and doesn't use flexbox, so you just need to be careful to use a media query to add the style rule or it will break the collapsing of the grid on smaller screens.

So, you'll need to edit your Layout and add a class name to the row where you want the child columns to be of equal height, e.g. a class name of "equal-height".

Then add the following custom CSS:

@media ( min-width: 1200px ){
  .equal-height {
    display: flex;
  }
}

Your media query may need to be different depending on your Layout.

Problem:
Images are not expanding to the full-width of container on very large screens.

Solution:
The images are too small and need an explicit style rule to set width:100% to make them expand beyond their natural size to fill a larger container.

Problem:

The issue here is that the user wanted to display their repeatable fields images.

Solution:

This can be done by using our [wpv-for-each] shortcoode.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

Problem:

I'm customizing archive pages for custom tags and categories. I want to use the text in the field "description" of custom taxonomies to show it at the beginning of each archive page for this taxonomy, before the loop.

Solution:

In the term's archive page, you can display the description field of current term using Views shortcode [wpv-taxonomy-description]

Relevant Documentation:

https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-taxonomy-description

Problem:
When creating templates with Elementor, you can use Types fields as a source of dynamic content. Client expected to see their URL field available as a possible source, but it is missing.

Solution:
It appears that Elementor (who wrote this part of the integration) only show URL fields in places where a URL is expected, e.g. a button link.