Thumbnail image and the headline on mobile devises

Hi Peter,

I believe you're aiming for something like this? https://share.getcloudapp.com/Z4uKkEw1

If so, try adding this CSS:

@media(max-width:768px){
    .inside-article {
        display: flex;
        flex-wrap: wrap;
    }

    header.entry-header {
        width: 100%
    }

    .post-image {
        width: 25%;
    }

    .entry-summary {
        width: 75%;
        padding: 0 20px;
    }
}

Thanks for the fast response, Elvin. It is close to what I need. But, is it possible to remove the excerpts. Just the thumbnail and the headline to the right.

See it on the mobile
http://www.yahoo.com

I see, Thanks!

Let's modify the CSS to this:

@media(max-width:768px){
    .inside-article {
        display: flex;
        flex-wrap: wrap;
    }

    header.entry-header {
        padding: 0 20px;
        order: 2;
    }

    .post-image {
        width: 25%;
        order: 1;
        margin-top: 0 !important;
    }

    .post-image a {
        display: flex;
        position: relative;
        width: 100%;
        padding-top: 100%;
        border-radius: 5px;
        overflow: hidden;
    }

    .post-image a img{
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        height: 100%;
    }

    .entry-summary {
        display: none;
    }
}

Here's the expected result - https://share.getcloudapp.com/6qurepA4

Thanks, Elvin. The screenshot you have sent that is exactly what I would like to get. But with the new CSS the headline is pushed below the thumbnail image. To the right of the thumbnail is an empty space. The same look is on IPhone and Android.

Hi Peter,

Try change this CSS:

header.entry-header {
    padding: 0 20px;
    order: 2;
}

to this:

header.entry-header {
    padding: 0 20px;
    order: 2;
    width: 75%;
}

Let me know :)

Thanks, Ying! It does works! The one thing I still need help with is to make the headline smaller. Please...

Thanks, Ying! It does works! The one thing I still need help with is to make the headline smaller. Please…

You can change the heading sizes through the customizer settings' Typography.
https://docs.generatepress.com/article/typography-overview/

https://share.getcloudapp.com/nOuPnQmx

Found it. Archive Content Title (H2). Thanks Elvin. Resolved.

Nice one. No problem. glad to be of any help. :D