[Resolved] How To Make Homepage and Category Posts In Mobile

[Hridoy]

Hi,

I use the marketer version now.

I want to make the homepage and category’s posts in the mobile version like this one: https://postimg.cc/8FRBWZBn

How can I do it..?

[David]

Hi there,

can you share a link to your site ?

[Hridoy]

This is the site: androidmtk.com

and my site: https://appsrs.com/

[David]

You are going to need to add a post with a featured image to your site, so i have something to work on.

[Hridoy]

Hi, I have added the feature photo to a post. Check now…

[David]

Just to confirm – how should the layout look on Desktop?

[Hridoy]

same to the androidmtk.com website

[Ying]

Hi Hridoy,

Isn’t this what you are trying to achieve already?
https://www.screencast.com/t/LKWTxhbH

Let me know if I miss anything.

[Hridoy]

My site is: appsrs.com

And I want to make the homepage and category’s posts in the mobile version like this one: androidmtk.com website

[David]

Ok so the same on Desktop and Mobile.

First go to Customizer > Layout > Blog –> Featured Images ( Archive Tab ) and change the Location to: Above Title.
Let me know when that is done and i will provide the next steps

[Hridoy]

I changed it, then..?

[David]

You have already added this CSS:

@media(max-width: 500px) {
    .entry-summary {
        display: none;
    }

    body:not(.single) .inside-article {
        display: grid;
        grid-template-columns: 48% 52%;
    }

    .post-image,
    .entry-header {
        grid-row: 1;
    }

    .post-image {
        grid-column: 1;
        margin-top: !important;
        margin-bottom: 0 !important;
        margin-right: 1em !important;
    }
}

Is that working for you? If not – can you remove that.

[Hridoy]

I removed the code, then..?

[Elvin]

Hi there,

I believe what David meant was, your site already has the CSS that makes the post display in a row-like manner.

He’s asking if that’s already fine by your requirement, else you can remove it.

That CSS he’s pertaining makes the posts display in rows on mobile. You can keep it if it’s fine working for you already.

My suggestion would be to atleast increase the @media rule from @media(max-width: 500px) to @media(max-width: 768px) so it catches all mobile.

I see that your site has excerpt hidden on mobile while the reference site had it visible. Do you want to change this as well? If yes, we may have to use some PHP snippets to change the HTML structure a bit.

[Author]

Posts