Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #787193

    https://kriesi.at/support/topic/website-two-column-blog-not-displaying-properly-in-mobile/

    I already made a thread for this. However, it’s not actually displaying properly. The blog posts are irregularly spaced vertically. Every other post is now too high or too low. I would like all blog posts to be the same spacing on mobile, if possible. Between the dates and the pictures, the spacing is different from one post to the next.

    Thanks,

    Brendon

    #787493

    Hey feoleb,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
      #top .slide-entry-wrap {
        margin-bottom: 0;
      }
    }

    Hope this helps :)

    Best regards,
    Nikko

    #791161

    Hello,

    I did that and the spacing is still different. It seems odd that having multiple columns on blog posts doesn’t work correctly as that’s one of the built-in features for enfold. Is it supposed to work correctly by default? I wonder if maybe some other custom css I have would be messing it up.

    /*this is so that the logo image of the menu does not appear*/
    .logo { display: none; }
    
    /*This is so that the header container which adds a space and border for the header logo does not show*/
    .container.av-logo-container{
    display:none!important;
    }
    
    /*This adds some padding to the bottom of the posts so that the 'read more' button isn't cut off*/
    .slide-entry-excerpt {
      padding-bottom:32px;
    }
    
    /*this is so that the blog displays properly when the screen is smaller width like on mobile devices*/
    @media only screen and (max-width: 767px) {
    .page-id-162 .slide-entry {
      width:100% !important;
      margin-left:0 !important;
    }
    }
    
    /* add padding to the top of blog posts so they display correctly in mobile mode */
    article.slide-entry.flex_column.post-entry{
    padding-top:32px !important;
    }
    
    /* change blog post navigation button color and font color*/
    .avia-post-nav {
       background: #c3512f !important;
       color: white !important;
    }
    
    /*display blog next previous arrows in mobile view and make them smaller and not show a preview*/
    @media only screen and (max-width:767px) {
      .responsive #top .avia-post-nav  {
        display: block !important;
        opacity: 0.8;
        margin-top:-70%;
        height: 30px;
      }
      /*also this makes it so the button doesn't expand when you click on it in mobile because it doesn't display right in that mode */
      .responsive #top .avia-post-nav .entry-info-wrap * {
        display: none !important;
      }
    .responsive #top .avia-post-nav .entry-info-wrap  {
        display: none !important;
      }
    }
    
    /*Change large button minimum width for front page 'start at the begging or see latest articles' buttons to be the same size*/
    .avia-button.avia-size-large { min-width: 290px; }
    
    @media only screen and (max-width:767px) {
      #top .slide-entry-wrap {
        margin-bottom: 0;
      }
    }
    #791203

    Hi,

    If that’s the case, please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Nikko

    #791916

    Hello,

    Can you confirm if this is not a problem out of the box?

    Thanks,

    Brendon

    #792127

    Hi,

    Yes, I think it’s more of a caching issue, most likely caused by WP Fastest Cache. Quick CSS’ code appears in this cached css file produced by the plugin, you can check on the link and you should see the code you’ve posted above except the one I gave you.

    Best regards,
    Nikko

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