This quick video tutorial shows you how to fix equal height with price table widgets and how to align the buttons at the bottom regardless the number of added features.
As a bonus tip I show how you can add a cool focus hover effect to finish it off.
Timestamps
0:00 - Introduction
0:32 - Equal height fix
1:30 - Align buttons to the button
2:06 - Showcase focus hover effect
2:20 - CSS focus hover effect
3:58 - End
The CSS (prefixed)
-----------------------------
selector .elementor-widget-container,
selector .elementor-widget-price-table,
selector .elementor-price-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
selector .elementor-price-table__footer {
margin-top: auto;
width: 100%;
}
/*hover effects*/
selector .elementor-widget-price-table {
-webkit-transition: all 0.3s ease-out ;
-o-transition: all 0.3s ease-out ;
transition: all 0.3s ease-out ;
}
selector .elementor-row:hover .elementor-widget-price-table {
-webkit-filter: blur(4px);
filter: blur(4px);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
selector .elementor-widget-price-table:hover {
-webkit-filter: blur(0px) !important;
filter: blur(0px) !important;
-webkit-transform: scale(1.2) !important;
-ms-transform: scale(1.2) !important;
transform: scale(1.2) !important;
}
Link to the template
glyphbox.be/downloads/pricing-...
Thanks for watching!
Feel free to subscribe my channel for more video's about Elementor and CSS.
Remember my widget classname reference guide can still be downloaded here
glyphbox.be/downloads/element...
Music credits
George Street Shuffle by Kevin MacLeod
filmmusic.io/song/3800-george...
Free license
creativecommons.org/licenses/...
You can also buy me a beer as a token of appreciation for the effort I took in these tutorials via this link: kzitem.info?redi...
Негізгі бет Тәжірибелік нұсқаулар және стиль Equal height fix - Pricing table widget + focus hover effect
Пікірлер: 19