Title: Same Height Author: damiarita Published: Ọ̀wàrà 15, 2015 Last modified: Ṣẹrẹ 24, 2017 --- Ṣàwárí àwọn plugin Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**. Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun. ![](https://s.w.org/plugins/geopattern-icon/same-height.svg) # Same Height Láti ọwọ́ [damiarita](https://profiles.wordpress.org/damiarita/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/same-height.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/same-height/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/same-height/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/same-height/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/same-height/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/same-height/) ## Àpèjúwe Sometimes we want to display to boxes side by side and they have to look the same. CSS doesnÌtumọ̀ Yorùbá: ’t always help. This plugin will use jQuery to detect the boxes you want and force them all to have the same size. The size is uses is the size of the tallest box. If you have a some parts of your content that need to have the same height, simply wrap them with the `[sameheight/]` shortcode like this: [sameheight] This is a short text [/sameheight] [sameheight] This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text [/sameheight] When the html renders on your screen, both parts content parts will look equally height. This is very useful if they are floating next to each other and they have a background. #### What if I have different sizes in the same page? You can group shortcodes like this: [sameheight group=”1Ìtumọ̀ Yorùbá: ″] This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text[/ sameheight] [sameheight group=”1Ìtumọ̀ Yorùbá: ″] This is a short text [/sameheight][ sameheight group=”2Ìtumọ̀ Yorùbá: ″] This is another short text [/sameheight] [sameheight group=”2Ìtumọ̀ Yorùbá: ″] This text is long, but not quite as long as the previous one. So, I donÌtumọ̀ Yorùbá: ’t want these to parts to look as long. But they should still look the same. [/sameheight] #### What if I have a responsive site and I only want the same height to apply in wide-screen, side-by-side configurations? You can add a breakpoint like this. [sameheight breakpoint=”xs” ] (You could even use no breakpoint at all) This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text [/sameheight] [sameheight breakpoint=”xs” ] (You could even use no breakpoint at all) This text always has to use the same height than the previous one. [/sameheight] [sameheight breakpoint=”md”] This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text [/sameheight] [sameheight breakpoint=”md”] This text only has to use the same height when it is next to the previous, but not when it is underneath on smarphones. [/sameheight] You have these breakpoints (those familiar with bootstrap know them): * “xs” forces same height for all window widths (extra small window Ìtumọ̀ Yorùbá:– smartphone). Alternatively, you can use no breakpoint * “sm” forces same height for window widths > 768px (small window Ìtumọ̀ Yorùbá:– small tablet) * “md” forces same height for window widths > 992px (medium window Ìtumọ̀ Yorùbá:– table or small desktop) * “lg” forces same height for window widths > 1200px (large window Ìtumọ̀ Yorùbá:– desktop) Names and widths are based on bootstrap. Please, note that shortcodes with different “breakpoint” will be in different groups regardless of the “group” setting. You can still use “group” to separate to groups with the same “breakpoint”. #### I have some styles in CSS for my classes. How can I apply classes to the content? Easy: [sameheight additional_classes=”my-class1 my-classA”] This is a short text[/ sameheight additional_classes=”my-class2 my-classB”] [sameheight] This is a very, very, very, very, very, very long text [/sameheight] #### Can I use all the possibilities together? Sure: [sameheight group=”1Ìtumọ̀ Yorùbá: ″ breakpoint=”md” additional_classes=” my-class1 my-classA” /] will work. #### Do I need to use the shortcode? No! If you are editing your html, you can put the right properties in it. ThatÌtumọ̀ Yorùbá: ’s all tha shortcode does. Make sure you add the class ‘same-height’. If you use a break point, add it with a hyphen (-) like this: ‘same-height-xs’, ‘same- height-sm’, ‘same-height-md’, or ‘same-height-lg’. The Javascript is looking for those classes to identify the html elements it has to work on. If you are grouping boxes, use the ‘same-height-group’ property. Like `
` ## Àwọn àwòrán ìbòjú [⌊To boxes side to side with the same height⌉⌊To boxes side to side with the same height⌉[ To boxes side to side with the same height ## Ìgbéwọlẹ̀ 1. On the left side menu select Plugins > Add New 2. In “Search Plugins” field enter “same height” and search 3. Press “Install Now” button of the “same height” ## FAQ What if I have different sizes in the same page? You can group shortcodes like this: [sameheight group=”1Ìtumọ̀ Yorùbá: ″] This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text[/ sameheight] [sameheight group=”1Ìtumọ̀ Yorùbá: ″] This is a short text [/sameheight][ sameheight group=”2Ìtumọ̀ Yorùbá: ″] This is another short text [/sameheight] [sameheight group=”2Ìtumọ̀ Yorùbá: ″] This text is long, but not quite as long as the previous one. So, I donÌtumọ̀ Yorùbá: ’t want these to parts to look as long. But they should still look the same. [/sameheight] What if I have a responsive site and I only want the same height to apply in wide- screen, side-by-side configurations? You can add a breakpoint like this. [sameheight breakpoint=”xs” ] (You could even use no breakpoint at all) This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text [/sameheight] [sameheight breakpoint=”xs” ] (You could even use no breakpoint at all) This text always has to use the same height than the previous one. [/sameheight] [sameheight breakpoint=”md”] This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text [/sameheight] [sameheight breakpoint=”md”] This text only has to use the same height when it is next to the previous, but not when it is underneath on smarphones. [/sameheight] You have these breakpoints (those familiar with bootstrap know them): * “xs” forces same height for all window widths (extra small window Ìtumọ̀ Yorùbá:– smartphone). Alternatively, you can use no breakpoint * “sm” forces same height for window widths > 768px (small window Ìtumọ̀ Yorùbá:– small tablet) * “md” forces same height for window widths > 992px (medium window Ìtumọ̀ Yorùbá:– table or small desktop) * “lg” forces same height for window widths > 1200px (large window Ìtumọ̀ Yorùbá:– desktop) Names and widths are based on bootstrap. Please, note that shortcodes with different “breakpoint” will be in different groups regardless of the “group” setting. You can still use “group” to separate to groups with the same “breakpoint”. I have some styles in CSS for my classes. How can I apply classes to the content? Easy: [sameheight additional_classes=”my-class1 my-classA”] This is a short text[/ sameheight] [sameheight additional_classes=”my-class2 my-classB”] This is a very, very, very, very, very, very long text [/sameheight] Can I use all the possibilities together? Sure: [sameheight group=”1Ìtumọ̀ Yorùbá: ″ breakpoint=”md” additional_classes=” my-class1 my-classA” /] will work. Do I need to use the shortcode? No! If you are editing your html, you can put the right properties in it. ThatÌtumọ̀ Yorùbá: ’s all tha shortcode does. Make sure you add the class ‘same-height’. If you use a break point, add it with a hyphen (-) like this: ‘same-height-xs’, ‘same- height-sm’, ‘same-height-md’, or ‘same-height-lg’. The Javascript is looking for those classes to identify the html elements it has to work on. If you are grouping boxes, use the ‘same-height-group’ property. Like `
` ## Àwọn àgbéyẹ̀wò ![](https://secure.gravatar.com/avatar/1062baa48a5044defe20da7f33d31abbf87ae710cff26671e2a0b9d7d2ddeb5d? s=60&d=retro&r=g) ### 󠀁[Simple and effective](https://wordpress.org/support/topic/simple-and-effective-756/)󠁿 [NikosZ](https://profiles.wordpress.org/nikosz/) Òkúdù 29, 2017 1 ìdáhùn It easy and works great for same height text boxes. If only i have found it before i lost 2 hours playing with paddings. ![](https://secure.gravatar.com/avatar/f5c6166d8b0683d9e0bd7b7f6ce0b8f01a5403ca8378264a6f7180f7569baa91? s=60&d=retro&r=g) ### 󠀁[Worked where others failed](https://wordpress.org/support/topic/worked-where-others-failed-2/)󠁿 [NightL](https://profiles.wordpress.org/nightl/) Ọwẹ́wẹ̀ 12, 2016 1 ìdáhùn I was targeting divs in the header and the content areas. Other plugins failed and my hand coding that would work if the divs were on the same page failed as well. Happy now ![](https://secure.gravatar.com/avatar/a865d46e395c9c0ad76da21fe5f37fa99d49026ad644cb7a839f46c8bf980a7d? s=60&d=retro&r=g) ### 󠀁[Works!](https://wordpress.org/support/topic/works-943/)󠁿 [Finger Tommy](https://profiles.wordpress.org/nakednipple/) Ọwẹ́wẹ̀ 3, 2016 1 ìdáhùn If you use it in php code, just use “same-height”, not “sameheight”. I´m using Plugin Version 1.1.1 ![](https://secure.gravatar.com/avatar/38c8935d9bc763a088372ea2da2fedb3d0744798819720af4521ad4c965f00e2? s=60&d=retro&r=g) ### 󠀁[Does exactly what it says](https://wordpress.org/support/topic/does-exactly-what-it-says-85/)󠁿 [damiarita](https://profiles.wordpress.org/damiarita/) Ọwẹ́wẹ̀ 3, 2016 2 àwọn ìdáhùn The plugin is going to put an extra JS file on your page which will find all the entities that were wrapped with the shortcode and force them to be as heigh as the heighest [ Ka gbogbo àwọn àgbéyẹ̀wò 4 ](https://wordpress.org/support/plugin/same-height/reviews/) ## Àwọn Olùkópa & Olùgbéejáde “Same Height” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí. Àwọn Olùkópa * [ damiarita ](https://profiles.wordpress.org/damiarita/) [Túmọ̀ “Same Height” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/same-height) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/same-height/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/same-height/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/same-height/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/same-height/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà #### 1.4.0 * We make this plugin compatible with AutomatticÌtumọ̀ Yorùbá: ’s AMP plugin https:// wordpress.org/plugins/amp/ #### 1.3.0 *We load the minified JS by default. If SCRIPT_DEBUG is set to true, the non minified is used *We remove deprecated jQuery functions #### 1.2.0 * When blocks are marked to have the same height with a breakpoint, the window widths measurement is improved to have consistency with bootstrap: In stead of usind window.widht, we now use window.matchMedia. For older browser without support to .matchMedia, .width is used. #### 1.1.0 * When blocks marked to have the same height contained images, the previous version could do the calculations without taking it into account. Now, all images will be taken into account after they load. #### 1.0.0 * First release ## Àkójọpọ̀ Meta * Ẹ̀yà **1.4.1** * Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 10 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **100+** * Ẹ̀yà WordPress ** 1.3.0 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **4.7.35** * Èdè * [English (US)](https://wordpress.org/plugins/same-height/) * Àwọn àmì * [css](https://yor.wordpress.org/plugins/tags/css/)[javascript](https://yor.wordpress.org/plugins/tags/javascript/) [jquery](https://yor.wordpress.org/plugins/tags/jquery/)[shortcode](https://yor.wordpress.org/plugins/tags/shortcode/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/same-height/advanced/) ## Àwọn ìbò 5 lára àwọn ìràwọ̀ 5. * [ 4 5-star reviews ](https://wordpress.org/support/plugin/same-height/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/same-height/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/same-height/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/same-height/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/same-height/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/same-height/reviews/#new-post) [Wo gbogbo àwọn àgbéyẹ̀wò](https://wordpress.org/support/plugin/same-height/reviews/) ## Àwọn Olùkópa * [ damiarita ](https://profiles.wordpress.org/damiarita/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/same-height/)