How to Fix Unequal Column Height in WordPress (Gutenberg) - Equal Heights
How to Fix Unequal Column Height in WordPress (Gutenberg) - Equal Heights
Learn how to fix Equal Height in WordPress Gutenberg sites using The Plus Addons for Gutenberg. We will make all the columns of same height regardless of any content length using simple CSS selector.
This can make blog, WooCommerce Product, CPT posting listing equal, pricing table equal, info box equal and much more. Making WordPress columns of same height makes the design consistent and gives an elegant look to websites.
▶️ Live Demo - https://theplusblocks.com/plus-extras…
⚡ Plugin Website - https://theplusblocks.com/
⚡ Get the Plugin https://theplusblocks.com/pricing
🔥 USE CODE ” YOUTUBE10 ” TO ENJOY 10% DISCOUNT 🔥
⏯️ Don’t Forget to Subscribe to our YouTube channel for ✨ The Latest Updates - https://www.youtube.com/c/POSIMYTHInn…
Check our Complete Gutenberg Tutorial Series - • How to Create Animated Service Boxes …
Timestamps 🕐
0:00 Overview
0:52 CASE 1: Equal Height for Post Listing
2:49 CASE 2: Equal Height for Pricing Table Column
3:48 CASE 2: Equal Height for Info Box
4:54 Targetting multiple classes for Equal Height
6:17 End Notes
Important Links 🔗
▶️ Website - https://theplusblocks.com/
▶️ Join our Facebook Community - / theplus4gutenberg
▶️ Add your favourite feature on our Roadmap - https://roadmap.theplusblocks.com/
▶️ Hit Like on our Facebook Page - / tpagutenberg
▶️ Need Help with Blocks, refer our Docs - https://docs.posimyth.com/tpag
▶️ Enjoy Premium Support- https://store.posimyth.com/helpdesk
▶️ Check our Nexter Theme - https://nexterwp.com/
#Fixequalheight #wordpresstutorial #wordpressblocks
Content
0 -> now while designing a WordPress website
there are many times when we face this
4.62 -> issue of unequal height of many web elements so
here you can see we have a Blog role and we can
11.7 -> clearly see we have a high difference here in
this post grid and here we have a pricing table
19.68 -> and once again we have a high difference in all
these columns and after that we have this info
25.8 -> box and this is most of the time used by various
websites for creating services and stuff like that
31.98 -> so and once again here we can see we have a high
difference in title as well as in the description
42.78 -> foreign
43.92 -> so first let's understand why this unequal
height is happening and then we will fix that
52.8 -> in this first example we have a post grid so you
can use this for your woocommerce product grade
62.82 -> or maybe your custom post type grid so here we
have a title which is in one single line and
68.34 -> after this we have a title which is in two lines
which is making this height difference so if we
74.1 -> open this list view from here and if we click on
this TP container which is holding our post grid
81.6 -> so here is our post listing blog so here if there
could be a way by which we could tell the parent
88.92 -> container to make all the Inner Elements with
equal height so that should solve the problem
94.5 -> and that's what we are going to do here if we
right click on this and go to inspect element
100.14 -> to see the code of this page and let me just bring
the screen a little bit up so here we can see that
108.18 -> this is our H3 title the title for this blog post
and after this we have this div which is holding
115.5 -> this title together so now what we need to do
is just click on this div and copy this class
121.8 -> of div which is holding our title now as you can
see there are two classes separated by this space
128.88 -> in between so we just need to copy one class name
from here let's copy this and close this window
136.98 -> and now we need to click on TP container the
parent element of this grid and then go to
143.7 -> Advanced and then click on equal height and here
we have an option for equal height let's turn
150.36 -> it on and here we just need to paste this unique
class now in order to make it work make sure you
156.6 -> enter the class name with this dot or period sign
and after that just click on apply equal height
162.72 -> and watch what happens as soon as we click on this
button now our blog rule is showing with equal
169.74 -> let's do the same for this pricing table so
here we can see that the difference in the
179.82 -> height is because of this content here so here
once again we will right click on this text
187.38 -> and we will look for the parent div
class so this is the price content wrap
193.62 -> so this is the class we need to copy let's copy
this from here once again we can see two more
199.56 -> class name here but we only need to copy one
class name let's close this box and now we
206.52 -> come back here in this parent TP container and
go to Advanced and here we have plus extra equal
214.56 -> height let's turn on equal height option and then
with the DOT sign we will paste the class name
222.42 -> let's apply equal height and boom now we can
see the equal height for this pricing table
233.76 -> here we have the third case we have these two info
boxes here and here we can see this TP container
240.9 -> as the parent container for both of these info
boxes and if we open this in the front end here we
247.92 -> can see the height difference is because of this
title and it's also because of the text below this
255.54 -> so in order to fix that let's first check
the class for this title so we go to inspect
264 -> and this is the service title class let's copy
this from here and in the back end we go to TP
272.52 -> container the parent class and then go to advance
and we go to plus extra equal height let's turn
279.9 -> this on and with the period sign we paste the
service title class let's remove the space after
285.84 -> this and then click on apply so now you can see we
have equal height for both of these service boxes
294.18 -> but now if I just go ahead and remove some of
the text from here we can now see we again have
300.48 -> issue of unequal height our title height is now
fixed but we have a high difference because of
306.84 -> this description text so let's update this here
and see how it looks in the front end so here
312.18 -> again we can clearly see our title height
is now fixed we have an issue of unequal
317.52 -> height with our description so let's go ahead and
inspect this description and copy the class name
323.7 -> so here it is service description
let's copy this class and here we
328.86 -> come back and select the TP container block
and then go to Advanced and for equal height
337.68 -> we need to paste here the second class name and
in order to do that we just need to type in comma
344.82 -> and without any space we will type in again a
period sign or a DOT sign and then paste our
351.06 -> new class and now let's apply again so here you
can see that the description is also now with
358.32 -> equal height so this is how you can also enter
multiple class in this equal height section
364.8 -> let's update this here and see how it looks
in the front end so first let's close this box
371.28 -> and refresh our page so now you can see our
title as well as our description is now with
376.98 -> equal height so this is how easy it is to solve
an equal height of various elements on your page
383.04 -> so if you like this video then make sure you
hit the like button and if you want to learn
386.16 -> more about such amazing things that you can
do with the plus add-on for good and work make
390.48 -> sure you subscribe to this Channel and hit the
notification Bell so that you can get notified
394.68 -> whenever we upload our next video so that's it
for this one and I'll see you in the next video
403.5 -> foreign
Source: https://www.youtube.com/watch?v=9vPXwL18Los