Theme Author
Tom
(@edge22)
Hi there,
Our pro version has image sizing/alignment options like that, but it should be possible with CSS/some PHP in the free version.
As of right now, I’m not sure there’s enough room in your content area for this kind of layout. Will you be making the content area wider?
Let me know 🙂
Hi Tom,
Thank you very much for your generous response. I have no objection to expanding the content area, In fact, I shrunk it because the default image size was too big.
I have removed the CSS code that was shrinking the container. Please do the needful and help me out.
Theme Author
Tom
(@edge22)
First, you’d need this PHP:
add_action( 'wp', function() {
remove_action( 'generate_after_entry_header', 'generate_post_image' );
add_action( 'generate_before_content', 'generate_post_image' );
} );
Then, this CSS:
.post-image {
float: left;
margin-right: 1.5em;
margin-top: 0;
}
.inside-article:after {
content: "";
display: table;
clear: both;
}
Hey Tom!
Worked like a charm (as expected). Thank you very much for the magical code.
The featured images on the homepage are slightly aligned to the left instead of center (in mobile view)
Please have a look into it and help me out. Thanks!!!…
Leo
(@leohsiang)
This is what I’m seeing on mobile:
https://www.screencast.com/t/e872qIup
Is that correct?
Not sure how it could be centered with the post titles there?
Hi Leo, thanks for your response.
The view in my mobile is different.
Sharing the image link please check it, you’ll see that the image is slightly aligned to the left.
https://ibb.co/9NfN8jX
Leo
(@leohsiang)
Try this:
@media (max-width: 768px) {
.post-image {
margin-right: 0;
}
}
Leo, thanks a lot.
It worked like a charm. Also, while browsing, I found that some images (containers) are shown larger than the other ones.
Is it possible to make them uniform?
Sharing image.
https://ibb.co/DVQmmnF
Leo
(@leohsiang)
The easiest way is to upload images that have relatively the same ratio.
Or we can use CSS like this:
.post-image img {
height: 200px;
width: auto;
}
Hi Leo,
The code that you shared to center align the image in mobile, is distorting the text.
Sharing the image: https://ibb.co/F8LkkMn
`@media (max-width: 768px) {
.post-image {
margin-right: 0;
}
}
Leo
(@leohsiang)
Try this as well:
@media (max-width: 768px) {
.blog .inside-article, .archive .inside-article {
display: flex;
flex-direction: column;
}
}
