Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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

    #641808

    Hey 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,
    Ismael

    #684526

    Hi,
    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
    Michael

    #685883

    Hi,

    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,
    Yigit

    #686404

    Hi 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
    michael

    #686711

    Hi!

    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,
    Ismael

    #686764

    Hi, 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
    Michael

    #688888

    Hey!

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.