![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 4, 2023 at 11:30 am #1406430
Hello!
I am using a grid row element to display portfolio items. Works great, but it does not align with the rest of the content of the page (top menu bar elements, Related projects and socket elements). It’s like the elements on the grid row are displaced outside the content area on both left and right side.
This only happens on desktop, everything looks in place on mobile.Is there a way to limit the Grid Row element to the content area in all portfolio pages?
Thanks!
May 4, 2023 at 12:16 pm #1406443so what was the reason to use the grid-row element? – because that is exactly the point – it is a full-width element on default
if i like to use the grid-row element as a container for other elements and have not a full-width setting. i use a littel snippet for child-theme functions.php.
And i use it with a custom-class on grid-row ( here in my case: grid-notfull )function grid_layout_notfull(){ $responsive_size = avia_get_option('responsive_size'); ?> <script> (function($){ $('.av-layout-grid-container.grid-notfull' ).each(function() { var notfullID = $(this).attr('id'); $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : ''; $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : ''; }); $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" }); $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"}); })(jQuery); </script> <?php } add_action('wp_footer', 'grid_layout_notfull');
______________
Now:. if you do not want to use grid-row element on portfolios as a fullwidth element – you can change the selector above to alway set on single portfolios:
#top.single-portfolio .av-layout-grid-container :function grid_layout_notfull(){ $responsive_size = avia_get_option('responsive_size'); ?> <script> (function($){ $('#top.single-portfolio .av-layout-grid-container' ).each(function() { var notfullID = $(this).attr('id'); $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : ''; $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : ''; }); $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" }); $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"}); })(jQuery); </script> <?php } add_action('wp_footer', 'grid_layout_notfull');
the IDs transfer as class to the wrapping container is only to have better selectors for them on other settings.
One thing – there might be a little difference on the alignment. this derives from the padding that commonly the columns will have ( f.e. if you tend to have 30px padding on columns – you can correct this line in the snippet to:
$('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 20px"});
see here a demo page: https://webers-testseite.de/grid-row-alb/
-
AuthorPosts
- You must be logged in to reply to this topic.