Archived topic
Mobile blog post layout size adjustment
7 replies · Started by Irene on February 24, 2021
Hi!
I fell in love with your awesome theme! There's so many easy things to adjust to make the website exactly like you want to :D Kudo's!
I'm setting up a website for my recipe's and I've got the blog set-up with collumns (3 of them) and features images. However, on mobile, the "card" from the blog post is bigger than the featured image. I've tried some @media codes on the extra CSS part but couldn't get it to work.
When I had it working on mobile, my desktop site also displayed them in a single collumn haha!
Here's an image of the situation that's happening right now:
https://gezelligegerechten.nl/wp-content/uploads/2021/02/2021-02-24-18_35_24-Gezellige-Gerechten-Omdat-ik-hou-van-koken-bakken-en-gezellig-tafelen.png
And here's an image how we'd like it to look. It's from another plugin but we want to use the standard posts instead of a plugin's pages for the content. So we're trying to emulate the look of the plugin as much as we can :-)
https://gezelligegerechten.nl/wp-content/uploads/2021/02/2021-02-24-18_41_31-Cooked-Gezellige-Gerechten.png
Notice there's a bigger margin left and right and the images are as wide as the post itself.
The blog can be viewed at: https://gezelligegerechten.nl
And the plugin we want to emulate at: https://gezelligegerechten.nl/receptentjes/
I hope you can help us :-) :-)
Hi Irene,
Try this CSS:
@media (max-width: 768px) {
#main.site-main{
margin-left: 30px;
margin-right: 30px;
}
}Hi Ying,
Thanks a bunch! That solves the posts going full-screen.
I'm trying to get the image to fill up the post but I can't get that to work. Is that a simple line of CSS as well? I've tried adjusting a few different ones but to no avail I'm afraid :-(
Do you mean you want the featured image as background image of the post?
Let me know!
Hi!
No, the featured image isn't filling the top of the post from left to right.
https://gezelligegerechten.nl/wp-content/uploads/2021/02/2021-02-24-21_34_37-Gezellige-Gerechten-Omdat-ik-hou-van-koken-bakken-en-gezellig-tafelen-1.png
If it's possible I'd like it to scale from the left all the way to the right. It seems it's at a fixed width now.
This is what I see on desktop:
https://www.screencast.com/t/nvj65iIB
And this is what I see on mobile:
https://www.screencast.com/t/nvj65iIB
They both look good, only on tablet view, there's space besides the iamge:
https://www.screencast.com/t/D38H7A1Y
That's because without the sidebar, the container enlarges itself automatically to wider than 300px, but your image is only 300px wide, the space presents the difference.
You could use this CSS to give the container a max width:
.blog article {
max-width: 300px;
}Thanks Ying! You've been a great help!
You are welcome Irene :)
