Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1409183

    Is it possible to change number of block columns with the media query and css?
    Note that 3 columns on Ipad doesn’t look right, so would like to finesse that with css.
    Any thoughts?
    Thanks in advance.
    (I thought I had seen this some time ago, but can’t find in search!)

    #1409238

    Hey CharlieTh,

    Thank you for the inquiry.

    Are you using the Grid Layout of the Blog Posts element? If so, then adding the following css code should adjust the width of the items on tablet view.

    @media only screen and (max-width: 1024px) {
    
      /* Add your Mobile Styles here */
      .responsive #top #wrap_all .avia-content-slider-odd .slide-entry {
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
      }
    }
    
    

    Best regards,
    Ismael

    #1409290

    Ismael, can you tell me what, for instance, would change 3 columns in the grid to 2?
    I don’t see any change with your suggestion, but think I don’t understand precisely what it’s doing.

    #1409296

    The problem on that is that enfold organizes the entries (artikles) on a grid layout by column setting.
    See here example page of enfold grid layout blog: https://kriesi.at/themes/enfold-2017/blog/blog-default/
    if you take a look on developer tools you see that on a 3column grid groups of 3 entries are build to have that layout:
    in a three-column grid layout, 3 entries each have their own wrapper

    (click to enlarge the image)

    so if you have the chance to handle the whole grid as one wrapper and have some media queries to style them you had to bring all entries to one wrapper
    put this to your child-theme functions.php

    function wrap_articles_in_one_flex_container(){ 
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
      (function($) {
        $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
            $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
        });
        $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
      })(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'wrap_articles_in_one_flex_container');

    And then style that one wrapper f.e. with flexbox layout on quick css:

    #top .avia-content-slider .slide-entry-wrap {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }
    
    #top.blog .slide-entry::before, 
    #top.blog .slide-entry::after {
      display: none;
    }
    
    #top .avia-content-slider .slide-entry-wrap .slide-entry {
      flex: 0 1 calc(33% - 30px) ;
      margin: 0px 15px 30px !important;
      width: unset !important;
      padding: 0px !important;
    }
    
    @media only screen and (max-width:989px) {
      #top .avia-content-slider .slide-entry-wrap .slide-entry {
        flex: 0 1 calc(50% - 30px);
        margin: 0px 15px 30px !important;
      }
    }
    
    @media only screen and (max-width:767px) {
      #top .avia-content-slider .slide-entry-wrap .slide-entry {
        flex: 0 1 100%;
        margin-bottom: 30px !important;
      }
    }

    see here : https://webers-testseite.de/blog/

    One thing to mention: a paginated blog will not work correctly that way – because the amount of entries each page will not be influenced.

    PS: On the example page of enfold there is an audio entry – and on this one the width calculation does not work because of a setting by Enfold. On this page it would be necessary to set the width:

    #top .avia-content-slider .slide-entry-wrap .slide-entry .mejs-container {
      min-width: unset !important;
      width: unset !important;
    }
    #1409357

    Hi,

    Thank you, @Guenni007, for providing the explanation!

    I don’t see any change with your suggestion, but think I don’t understand precisely what it’s doing.


    @CharlieTh
    : You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to see the changes. The css modification should make the entries full width on tablet screens. If you wish to display the entries in two columns, you should follow the suggestion provided by @Guenni007 above.

    Best regards,
    Ismael

    #1410279

    Sorry not to have applauded this answer earlier!
    Wow, Guenni007, you did a lot of work and were very clear in your explanations. Have not implemented your clever suggestion…and would NEVER have figured it out on my own.

    Thank you both for taking the time to help me understand what needs to be done. I really appreciate it.
    And, yes, you certainly can close this thread…was VERY well answered!

    #1410285

    Hi,
    Glad Guenni007 could help, thank you Guenni007, 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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Change number of blog columns via media query?’ is closed to new replies.