-
AuthorPosts
-
July 12, 2024 at 5:22 pm #1461942
I am trying to use the Ajax portfolio to show some of our content, but because the titles of each Portfolio Item are different lengths, the heights of the boxes don’t match, even if I make the images all the same sizes. Can you help provide some CSS or other settings to make sure the grid displays nicely with all the items having equal heights regardless of their Title length? See screenshot here:
https://drive.google.com/file/d/1pmzckxR6ub8fgSVswaB7i_mcAi21Iwdt/view?usp=sharing
This is on our staging site as well, which you can view here. We are testing this before we go live.
July 12, 2024 at 5:31 pm #1461944Also, is it possible to align the text in the middle vertically, so there is equal space on top and bottom for all the Portfolio Item Titles regardless of their length?
July 13, 2024 at 6:10 pm #1461988Hi,
Thank you for the link to your site, please ensure that you are using the same image size and layout for all images, either portrait or landscape, this should correct the images.
For the grid titles, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_script() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ $('#av-sc-portfolio-1 .grid-sort-container').each(function(){ var $gridContent = $('.grid-content',this); var gridContentmaxHeight = Math.max.apply(Math, $gridContent.map(function(){ return $(this).height(); }).get()); $gridContent.height(gridContentmaxHeight); }); })(jQuery); }); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );
and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
.grid-content { align-items: center; display: flex; justify-content: center; } h3.grid-entry-title a { text-align: center; float: right; }
Best regards,
MikeJuly 13, 2024 at 6:35 pm #1461990Thank you! This is almost working perfectly, but as you can see, I have 2 Portfolio grids on this page. Each displaying different categories/filters. For some reason, the CSS isn’t working for the second Portfolio grid. The title areas in that one are not equal height. See here:
Or screenshot uploaded here:
https://drive.google.com/file/d/18OCFgg0XreQgH-oa0oG9Y_O5wIOKxGKy/view?usp=sharingThanks in advance for your help fixing this issue.
July 13, 2024 at 8:19 pm #1461995Hi,
Please change #av-sc-portfolio-1 to .av-portfolio-grid-sorting-container in the code:
like this:function custom_script() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ $('.av-portfolio-grid-sorting-container .grid-sort-container').each(function(){ var $gridContent = $('.grid-content',this); var gridContentmaxHeight = Math.max.apply(Math, $gridContent.map(function(){ return $(this).height(); }).get()); $gridContent.height(gridContentmaxHeight); }); })(jQuery); }); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );
Best regards,
MikeJuly 14, 2024 at 8:08 pm #1462043Thank you! That worked.
July 14, 2024 at 8:32 pm #1462045Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Ajax Portfolio Grid equal height’ is closed to new replies.