[Support request] i want my blog post to look different on mobile

[Chetan]

i want my blog post archive post to look different on mobile how can i do it??

[David]

Hi there,

how different do you want it to look? Do you have an example site or image that you would match to?

[Chetan]

On desktop i want it like this

MSPoweruser – Microsoft and Technology News

and on mobile like this

MSPoweruser – Microsoft and Technology News

[David]

OK, so this is going to take some Customiser setup, a bit of PHP and some CSS if you’re up for it, if we can work through each step with you making changes to the site so i can check in:

To start with Customiser > layout > blog > Featured images – archive:
Set Location above title and alignment left. leave sizes as auto.

Then we need to create a wrap around the Title and Summary. We need to add this snippet:

function content_wrap_open() {
    if ( ! is_singular() ) {
        echo '<div class="content-wrap"><!---Open content wrap---->';
    }
}
add_action( 'generate_before_content', 'content_wrap_open' , 100 );

function content_wrap_close() {
    if ( ! is_singular() ) {
        echo '</div><!---Close content wrap--->';
    }
}
add_action( 'generate_after_content', 'content_wrap_close' );

https://docs.generatepress.com/article/adding-php/

If you’re not using a child theme then i would advise the Code Snippets plugin mentioned in the article.

Then add this CSS:

@media (min-width: 768px) {
    .archive .inside-article, .blog .inside-article, .search-results .inside-article {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-right: 40px;
        padding: 0;
    }
    .archive .post-image a img, .blog .post-image a img, .search-results .post-image a img  {
        display: block;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .archive .content-area, .blog .content-area, .search-results .content-area {
        padding: 12px;
    }
    .archive .inside-article, .blog .inside-article {
        padding: 0;
    }
}

.archive .post-image, .blog .post-image, .search-results .post-image {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 35%;
    flex: 1 0 35%;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.content-wrap {
    padding: 10px 10px 10px 20px;
}
.archive .entry-summary, .blog .entry-summary, .search-results .entry-summary {
    margin-top: 0 !important;
}

EDIT: MOST OF THE USED CODE FROM THIS TOPIC HAS BEEN UPDATED HERE EXCLUDING MOVE FOOTER META

[Chetan]

i have added this code now whats next

[David]

Can you make the customiser changes i mentioned here:

https://generatepress.com/forums/topic/i-want-my-blog-post-to-look-different-on-mobile/#post-628265

[Chetan]

yes i did that

[David]

OK, i edited the post above, and added the CSS you need, just add that to your Child theme or Additional CSS in the customiser.

[Chetan]

it doesn’t look like what i wanted to

[David]

I can’t see that the CSS has been added? If you have then clear any caches.

[Chetan]

it works but i wants images to be rectangular and heading little small and bold

[Chetan]

And there is gap between date and excerpt remove that

Customize: All About Xiaomi – Know Everything About Xiaomi

[David]

Adjust these two properties:

-ms-flex: 1 0 35%;
    flex: 1 0 35%;

Increase the % to 45% – may need tweaking a little.

To make it exactly square will create issues with responsiveness. But give that a shot and let me know.

You can change the headings in the Customiser under Colors > Body – Headings and Typography > Headings . The blog posts use the H2 heading.

[Chetan]

I did that but it doesn’t look good. And please tell me how i can remove that space between date & excerpt and also i want to add category just after author name. Thank you.

[David]

You need to add the Categories in the Customiser > Layout > Blog and then use this snippet to move them below the title:

add_action( 'wp', 'tu_move_footer_entry_meta' );
function tu_move_footer_entry_meta() {
    if ( is_home() ) {
        remove_action( 'generate_after_entry_content', 'generate_footer_meta' );
        add_action( 'generate_after_entry_title', 'generate_footer_meta' );
    }
}

once thats added we can look at the layout again

[Author]

Posts