Site logo

Archived topic

need help with with archives mobile display

7 replies · Started by Yueh Feng on August 22, 2021

Viewing posts 1–8 of 8

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.

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;
    }
}

Hi David,
Thank you so much!

Glad to be of help

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

Hi there,

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

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

Nice one. No problem. :D

This archived topic is closed to new replies.