Okay
  Public Ticket #1280383
Post dates not visible in mobile view
Closed

Comments

  •  2
    Bren Burrell started the conversation
    August 22, 2017 at 8:11pm

    I'm using the 'Standard Blog with sidebar' layout to display a list of blog posts.

    This gives an attractive layout for the archive index view on a desktop with Date & Nectar love meta displayed to the left of the title. 
    http://ktz.flywheelsites.com/news/

    In single post view, this meta data & categories are displayed beneath the title.
    http://ktz.flywheelsites.com/2017/08/09/stop-recruiting-more-municipal-police-officers-build-more-vending-spaces/

    However on a mobile (iPhone), dates are not displayed in either archive or single post view - a big concern - and categories are not displayed beneath the title in post view.

    Can you help me address this?

    User: flywheel
    Pass: first-draft

    Thanks
    Bren

  •  8,403
    Tahir replied
    August 23, 2017 at 4:04pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 690px) {
    .row .col.section-title span:not(.share-count-total), html .single #single-below-header span:not(.share-count-total) {
        display: block !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Bren Burrell replied
    August 23, 2017 at 5:34pm

    Hi Tahir

    Thanks that's a big improvement, but dates are still not displaying on the archive page entries.

    Bren

  •  2,723
    Andrew replied
    August 24, 2017 at 9:09am

    Hi again Bren,

    Thank you for writing back to us.

    Then please add the following code to display the date in archives:

    @media only screen and (max-width: 690px){
.container article.post .post-meta {
    display: none;
    margin-left: -80px !important;
}
.post-meta.no-img .date span{
    font-size: 15px !important;
}
}

    Hope this helps.

    Best regards.

  •  2
    Bren Burrell replied
    August 24, 2017 at 6:42pm

    Hi Andrew

    No, that doesn't seem to work. I have the following at the bottom of the Salient Options panel Custom CSS box:

    /* Mobile version */
    /*----------------*/
    /* Archive pages - display date */
    @media only screen and (max-width: 690px) {
        .container article.post .post-meta {
            display: none;
            margin-left: -80px !important;
        }
        .post-meta.no-img .date span {
            font-size: 15px !important;
        }
    }
    /* Single post - display date & categories */
    @media only screen and (max-width: 690px) {
        .row .col.section-title span:not(.share-count-total), 
        html .single #single-below-header span:not(.share-count-total) {
            display: block !important;
        }
    }


  •  2
    Bren Burrell replied
    August 24, 2017 at 8:12pm

    Hi Andrew

    Not sure if Ticksy is playing up again, but the reply I received from you via email, shown below, is not showing online - neither is your screenshot accessible.

    Note that dates are displaying in mobile view on my iPhone for Single Post pages but not the Archive pages eg http://ktz.flywheelsites.com/news/

    I have cleared the cache from my website host (flywheel) & my browser (chrome) & viewed via Firefox & Safari in mobile view - no sign of dates displaying on Archive pages.

    Thanks
    Bren

    --------------

    Hey there,

    Thanks for writing in.

    I have investigated the dates issue but on my iphone tests the dates show, can you clear your cache and confirm?

    Regards,

    Stop recruiting more municipal police officers! Build more vending spaces – Kubatana.net.clipular.png

    ---------------


  •  2,723
    Andrew replied
    August 25, 2017 at 8:38am

    Hi again Bren,

    Thank you for writing back to us.

    My apologies, it looks like the code was slightly mistaken, please replace it with this one instead:

    @media only screen and (max-width: 690px){
.container article.post .post-meta {
    display: block;
    margin-left: -80px !important;
}
.post-meta.no-img .date span{
    font-size: 15px !important;
}
}

    Below is how it looks like after the code is pasted:

    Hope this helps.

    Best regards.

  •  2
    Bren Burrell replied
    August 25, 2017 at 6:24pm

    Hi Andrew

    Thanks for that correction. It looks beautiful in mobile landscape mode! 

    However on many mobiles in portrait view - including my iPhone 6 - most of the date is truncated on the LHS. See my screenshot attached.

    When in mobile portrait view < 425px wide, can we get the date to display inline between Source (Author) & Category as per Single page view?

    I'm finding this styling for mobile very hard going and obscure so really appreciate your help.

    Bren

  •  8,403
    Tahir replied
    August 26, 2017 at 7:45am

    Hey Again,

    Remove the code earlier provided and use this:

    @media only screen and (max-width: 690px) {
    .container article.post .post-meta {
        display: block;
    }
    .ascend article.post .content-inner {
        padding-left: 80px;
    }
}

    Be.st

    ThemeNectar Support Team 

  •  2
    Bren Burrell replied
    August 26, 2017 at 4:23pm

    Hi Tahir

    Thank you. I modified the code as follows to prevent the padding being applied to Single Post pages:

    @media only screen and (max-width: 650px) {
        .container article.post .post-meta {
            display: block;
        }
        .ascend .posts-container article.post .content-inner {
            padding-left: 80px;
        }
    }

    Bren