[Resolved] Want to change the style of homepage on mobile

[Rohan Verma]

Hello devs
We want to change the look our blog on mobile. Currently the default has big images on home page (mobile)
We want our site to look like this on mobile devices > https://prnt.sc/qy1qfs

If possible tell us how we can achieve that look

[Leo]

Hi there,

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

We should be able to provide some CSS for that.

Let me know 🙂

[Rohan Verma]

thedroidtimes.com

[Rohan Verma]

We want to have this > https://prnt.sc/qy1qfs type of home page on mobile

[Rohan Verma]

Any idea how to achieve that?

[David]

Hi there,

try adding this CSS:

@media (max-width: 767px) {
    .wp-show-posts-image.wpsp-image-left {
        float: left;
        margin-right: 1em;
    }
    .wp-show-posts-image.wpsp-image-left img {
        max-width: 150px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 3px 6px 2px rgba(0,0,0,0.2);
    }
    .wp-show-posts .wp-show-posts-entry-title {
        font-size: 18px;
        line-height: 1.2em;
        font-weight: 600;
        margin-bottom: 0.25em;
    }
    .wp-show-posts-entry-summary,
    .wpsp-read-more,
    .wp-show-posts-entry-meta-below-post {
        display: none;
    }
}

Note this applies to the Home page as you’re using WP Show Posts. It will require different code if you want this on the GP Archives.

[Author]

Posts