[Resolved] Blog style in mobile

[Feber]

Hi,

I love my current blog style in desktop view. Image on the left and then title on the right.
But I don’t like it in mobile view. Because image on top and title below image.
My current mobile view : https://prnt.sc/-Cb7XSGmZ53o

How to design my blog mobile view looks similar like desktop/laptop view ?
My mobile view reference style : https://prnt.sc/l9rwHcqcfjuY

Thanks

[Fernando]

Hi Feber,

To achieve as such, can you kindly go to you Block Element – Content Template, and then modify the widths of the Container Blocks with the Grid Block on mobile view as such: https://share.getcloudapp.com/eDu5b4Kx

Check how it looks on Tablet view as well and set the appropriate Container Width.

Hope this clarifies! Kindly let us know how it goes. 🙂

[Feber]

Hi there,

It works in desktop.
If you see my mobile reference style, there is no post excerpt there. Post excerpt only appears in desktop view.

[Fernando]

There are 2 ways to approach this.

For one, you may add a CSS code like this in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .dynamic-entry-excerpt {
        display:none;
    }
}

The other approach would be to place the Dynamic Content Block within a Container Block and utilize the hide-on-* classes. Specifically, hide-on-mobile: https://docs.generatepress.com/article/responsive-display/

Either should work.

Hope this helps! 🙂

[Feber]

It works. I choose the 2nd approach.

Thank you very much.

[Fernando]

You’re welcome Feber! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts