[Resolved] need help with with archives mobile display

[Yueh Feng]

hi I’m looking for a way to change my archives page display (for the way showing posts) in mobile device ..

My website is here (please view it in mobile mode)

I want to change the way of my post is being displayed like this: here.

I’ve tried to search for some solution but it seems to be only changing from CSS…and i’m not expert in this..

If possible any expert please help me with this.

Thank you so much.

[David]

Hi there,

add this CSS to your site:

@media(max-width: 768px) {
    body:not(.post-image-aligned-center) .post .inside-article .post-image {
        float: right;
        margin-left: 20px;
    }
    .one-container.archive .post:not(:last-child)  {
        padding-bottom: 0 !important;
    }
    body:not(.post-image-aligned-center) .post .inside-article .post-image img {
        width: 120px;
        height: auto;
    }
    h2.entry-title {
        font-size: 16px;
    }
    .post-image + .entry-header .entry-meta {
        font-size: 14px;
    }
    .entry-summary {
        display: none;
    }
}

[Yueh Feng]

Hi David,
Thank you so much!

[David]

Glad to be of help

[Yueh Feng]

Hi David, I’m sorry to come back to this topic again, I may need your help.

Before setting up the code, my mobile was around 99% fast on Google Pagespeed insight, but now it has a “Cumulative Layout Shift” problem.

Now it’s running around 80-88 on google pagespeed insight
(I know it’s very fast already..just want to know if there is anyway to make it faster..?)

I have tried several way to code but this seems to be out of my knowledge 🙁

my web is here

[Elvin]

Hi there,

For starters, can you try disabling Critical CSS? This normally cases CLS if there are double entries of CSS selectors after it.

[Yueh Feng]

hi Elvin, Thank you for professional support! the pagespeed of my web is 100 now. amazing!
Thank you!

[Elvin]

Nice one. No problem. 😀

[Author]

Posts