[Support request] Customize the Mobile Homepage

[Debasis]

I want to customize the mobile homepage post like this: https://prnt.sc/qy1qfs without wp showposts.

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Debasis]

I added the link now check

[Leo]

Can you link me to your site in question that’s using GeneratePress?

[Debasis]

Sure, I added please check

[Ying]

It’s not possible if you want to keep your current desktop layout, unless you can build the same desktop layout as the example site.

[Debasis]

Ok, build the same desktop and mobile layout as the example site.

[David]

Hi there,

first go to Customizer > Layout > Blog –> Featured Images —> Archive tab and se the Location to Above Title.
After thats done we can look at the CSS required

[Debasis]

Done… please provide CSS

[Ying]

Try this:

 @media (max-width: 768px) {
    .blog .inside-article, .archive .inside-article {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
     .blog .post-image, .archive .post-image {
        width: 30%;
    }
     .blog .entry-header, .archive .entry-header {
        width: 65%;
        margin-left: 5%;
    }
     .blog .entry-summary, .archive .entry-summary, .archive span.byline, .blog span.byline{
        display: none;
    }
     .blog h2.entry-title, .archive h2.entry-title {
        font-size: 20px;
    }
}

[Debasis]

Thanks for sharing, I customized it a little bit, please check

@media (max-width: 768px) {
    .blog .inside-article, .archive .inside-article {
        display: flex;
    align-items: center;
    padding: 0 20px;
			
			
    }
	
	
     .blog .post-image, .archive .post-image {
margin: 0!important;
vertical-align: bottom;    
height: auto;
    }
	
	
     .blog .entry-header, .archive .entry-header {
        width: 65%;
        margin-left: 5%;
    }
     .blog .entry-summary, .archive .entry-summary,  .archive span.byline, .blog span.byline{
        display: none;
    }
     .blog h2.entry-title, .archive h2.entry-title {
        font-size: 18px;
			
    }
	.blog .entry-meta {font-size: 12px;
    margin-top: 3px;}
	
}

[Ying]

You are welcome 🙂

[Author]

Posts