Aligning text and image in a post (padding)

Still not Coming soon page)

Is it because I have not launched my website yet? How do I share the link (sorry for such a dumb ques) ??

• This reply was modified 4 years, 7 months ago by timelesshues.

I guess so.
You can see your page because you’re probably logged to your administration. Could you make it live for short time in order to see your problem and try to help you?

Sure. wIll it be possible to unpublish it again once the problem gets solved? Thanks.

Done. plz check now.

It depends of the ‘coming-soon’ plugin you’re using but I guess.

Ok so you want the images of your posts to reach the right side of its container, just like your text, right?

No, I want the text to reach the right side of the container as my image. I feel the text lines are getting too long to read.

I see.

Inspecting the code of your page, there is no defined width for your in post pictures. For example on the post you’ve provided your images are 768px wide, but on ‘The Magic Oil’ the picture is 790px wide. That’s their respective maximum width.
So, if the container is smaller than those values, the pictures will shrink to adapt the container but if its larger, they stops growing to their actual physical width.

To achieve your need, you will have to edit the css code of your website a bit. You could go to your WP admin -> wp-admin/customize.php and open Additional CSS.

The first thing to do could be make your picture reach the right side:

.wp-block-image img {
    max-width: 100%;
    width: 100%; // image to reach the right side
}

Then to remove the 40px right-padding have your paragraphs :

.hentry .text p {
    padding-right: 0;
}

At this point your text and image are aligned.

If you want to make the space between your post content and your sidebar, you cant edit the site-main like so:

#primary .site-main {
    padding-right: 30px; // change to 50px, 80px, ...
}

Let me know if it helps

Sure.. thank you so much.. i’ll just see if these works..

In the meantime, the mobile version of the my site is not fitting the screen? plz help with that as well.. Thanks.

That’s because you have a #page div who wrap your whole website and have margins of 100px on right and left. make them smaller one mobile using :

#page {
    margin-left: 20px;
    margin-right: 20px;
}

I just pasted the codes in the additional CSS under customizer and all the posts are working fine except “the best style lesson”. In this post the pics have really reduced in width as compared to the text.

• This reply was modified 4 years, 7 months ago by timelesshues.

I pasted the below code. Is it for the mobile version? If yes, it is still not fitting the screen.

#page {
margin-left: 20px;
margin-right: 20px;
}

Regarding the post “the best style lesson”. try to modify the first code like this :

.wp-block-image,
.wp-block-image img {
    max-width: 100%;
    width: 100%; // image to reach the right side
}

Concerning the second point, I can see you’ve implemented it but, the original code (margin 100px) still remains. Force the 20px wide margin modifying your code like so :

#page {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

Not a best practice but it’s a quick fix to do the trick.

Ok. Thanks. Let me check.

• This reply was modified 4 years, 7 months ago by timelesshues.
• This reply was modified 4 years, 7 months ago by timelesshues.