-
AuthorPosts
-
May 31, 2016 at 9:51 pm #641094
Hi!
I have a grid row with 3 cells. Each cell has some content + a full with button at the bottom. I want to align the full with buttons of each cell. Is there a quick fix for that?
Thanks :)
Kind regards
June 2, 2016 at 5:06 am #641808Hey luckylobo10,
Thank you for using Enfold.
Please add unique id to the grid row element, “custom-grid” for example then add this in the Quick CSS field:
// grid cell height add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script> (function($){ function c() { var isMobile = ''; if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement) { isMobile = true; } else { isMobile = false; } if( isMobile ) return; $('#custom-grid .flex_cell_inner').css('height', ''); var elementHeights = $('#custom-grid .flex_cell_inner').parent('.flex_cell').map(function() { return $(this).height(); }).get(); var maxHeight = Math.max.apply(null, elementHeights); $('#custom-grid .flex_cell_inner').height(maxHeight); } $(window).on('resize', function() { c(); }).resize(); })(jQuery); </script> <?php }
And this code in the QuicK CSS field:
#custom-grid .flex_cell_inner .avia-button-wrap { position: absolute; width: 100%; bottom: 0; } #custom-grid .flex_cell_inner { padding-bottom: 60px; }
Replace the default “#custom-grid” selector with the grid row id.
Best regards,
IsmaelSeptember 10, 2016 at 5:23 pm #684526Hi,
I want to archive the same here.
http://www.zeitbote.com/zeitbote-s-08-30/How to archive that? I don’t know how to replace the grid row id. Can you please give me hint?
Thanks and greetings
MichaelSeptember 13, 2016 at 4:02 pm #685883Hi,
Please edit your Grid Row element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
Best regards,
YigitSeptember 14, 2016 at 3:16 pm #686404Hi Yigit,
thanks, but nevertheless it doesn’t work. Section ID I gave.Inserted Code in Dhild CSS:/* Grid Row Button Alginment */ /* grid cell height */ add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script> (function($){ function c() { var isMobile = ''; if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement) { isMobile = true; } else { isMobile = false; } if( isMobile ) return; $('#custom-grid .flex_cell_inner').css('height', ''); var elementHeights = $('#custom-grid .flex_cell_inner').parent('.flex_cell').map(function() { return $(this).height(); }).get(); var maxHeight = Math.max.apply(null, elementHeights); $('#custom-grid .flex_cell_inner').height(maxHeight); } $(window).on('resize', function() { c(); }).resize(); })(jQuery); </script> <?php } /* Grid Row Button Alginment */ #custom-grid .flex_cell_inner .avia-button-wrap { position: absolute; width: 100%; bottom: 0; } #custom-grid .flex_cell_inner { padding-bottom: 60px; }
But they’re not moving. As far as i saw also these buttons use .avia-button-wrap or is this wrong?
Thanks and greetings
michaelSeptember 15, 2016 at 6:16 am #686711Hi!
What did you use as Section ID? You need to replace “custom-grid” with that ID. We checked the page but it doesn’t exist anymore. Please create a test page so that we can inspect the element. Don’t forget to apply the Section ID.
Regards,
IsmaelSeptember 15, 2016 at 7:42 am #686764Hi, sorry site was not public.
I created a testside with password. (see below)I called now everything grid1 in CSS and section-id.
http://pasteboard.co/3gDD68q8g.png
/* Grid Row Button Alginment */ /* grid cell height */ add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script> (function($){ function c() { var isMobile = ''; if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement) { isMobile = true; } else { isMobile = false; } if( isMobile ) return; $('#grid1 .flex_cell_inner').css('height', ''); var elementHeights = $('#grid1 .flex_cell_inner').parent('.flex_cell').map(function() { return $(this).height(); }).get(); var maxHeight = Math.max.apply(null, elementHeights); $('#grid1 .flex_cell_inner').height(maxHeight); } $(window).on('resize', function() { c(); }).resize(); })(jQuery); </script> <?php } /* Grid Row Button Alginment */ #grid1 .flex_cell_inner .avia-button-wrap { position: absolute; width: 100%; bottom: 0; } #grid1 .flex_cell_inner { padding-bottom: 60px; }
It’s has also some effects on the buttons but not the alignin. I can resize them, I can change the padding-bottom but somehow the needed alignment at the buttom does not work.
Any idea ?
I also tried to move the “add-action” part to functions.php, but also that is not bringing the needed effect.
Every hint would be great.
Greetings
MichaelSeptember 20, 2016 at 2:53 am #688888Hey!
We modified the php and the css code a bit. Please test it again. If it’s not working, please post the login details here so that we can check the site.
This is the updated code: https://kriesi.at/support/topic/align-fullwith-buttons-in-grid-row/#post-686764
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.