Image same width as text

Support
#1

Hi There!

In my blogpost I want my image the same width as the text.
https://wanderingways.nl/test-2/

Can you help me with that?

Thank you!

#2

Hello Astrid,

There is a CSS code that is adding the larger space beside the text area so kindly add this code in X > Theme Options > CSS:

.single-post .entry-featured {
    margin-left: 10%;
    margin-right: 10%;
}

Hope this helps.

#3

Thanks Jade! Is there an option for the other way around as well. For a smaller feature image?

#4

Also, the comment section doesn’t line up with the text either. I would love to see the feature image, text and comment box all the same width. The width of the current text)

Thank you! You’re a bless!

#5

Hello Astrid,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

div#respond {
    max-width: 730px !important;
    margin: 0 auto;
}

.blog .entry-thumb img {
    min-width: 0 !important;
    max-width: 85% !important;
    margin: 0 auto;
    display: block;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#6

Thanks Prasant!

The comment box looks nice now.

Your code for the image worked on the blog overview page (which looks better now, thanks!)
But it didn’t work on the image of the blogpost itself. So I tweaked it to;

.single-post .entry-thumb img {
min-width: 0 !important;
max-width: 85% !important;
margin: 0 auto;
display: block;
}

Now it resizes the image of the blogpost itself.
And thank you for pointing out the Chrome Browser Developer Toolbar, that will be a great help!

#7

You’re welcome Astrid!
We’re glad we were able to help you out.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.