Archived topic
Change Layout on Mobile (small screens)
1 reply · Started by Haneet on February 12, 2022
Hi
I imported Rumour Template from Site Library, but when I opened Rumour demo on smartphone, the UI of articles listed on homepage not look in list manner on mobile. The image is too big then title is in the next line, while on desktop both featured image and title are aligned in a row. Can we make it look like desktop?
screenshot for better understanding - https://ibb.co/zN8PDVc
The list with small images aligned on left side will look nice on small screens. Wiating for reply.
Want this kind of UI on mobile - https://ibb.co/PYZz1n0
Hi Haneet,
Try this CSS for the 2 featured posts on top of the home page:
@media (max-width: 768px) {
.wp-show-posts-inner {
display: flex;
align-items: center;
padding: 0 20px;
}
.wp-show-posts-inner > .wp-show-posts-image {
width: 40%;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
For the other posts, the layout is created with a block element - content template:
https://docs.generatepress.com/article/block-element-content-template/
You can modify it at appearance > elements > Content Template.
1. Set the containerblock which holds the featured image block to 33% width on mobile:
https://www.screencast.com/t/NTD1NGW1Rxon
2. Set the containerblock which holds the post meta and title to 66% width on mobile:
https://www.screencast.com/t/mvZ3KONkD
3. You can reduce the horizontal gap for Gridblock:
https://www.screencast.com/t/sWKmK6WF
You can do some more minor modifications within the block element.
