0

I have this custom coded blog page created - Link

The width of the blog page content is perfect and this is how I want it to be. But If you look at the images, they are also stretched to match the width of the content. I don't want that to happen and moreover, the images are stretched

Here is the css code that I've added to create the content's width:

.post.type-post.status-publish * {width: 800px !important;max-width: 800px !important; margin: auto !important;}
How to make the images stay flexible and change size to my needs while keeping the content's width same?

Please help me out here.

Thanks!

Vyshnav
  • 13
  • 3
  • 1
    Before asking please make a search because this is a question asked more and more times.... – Sfili_81 Mar 30 '22 at 08:19
  • Does this answer your question? [Make an image responsive - the simplest way](https://stackoverflow.com/questions/15458650/make-an-image-responsive-the-simplest-way) – Sfili_81 Mar 30 '22 at 08:20

1 Answers1

0

This works for me:

.post.type-post.status-publish img {
    width:auto !important;
}
mad
  • 320
  • 1
  • 11
  • Thanks a lot. This works for me too. I just have one more question. How to make the center of the image align here? Because the text is left-aligned. I only want the image to be center-aligned. – Vyshnav Mar 30 '22 at 08:40
  • Adding `display:block;` to above CSS should do the trick. Note that this works because the image already inherits `margin: auto`. – mad Mar 30 '22 at 08:54
  • Thank you. Could you please help me out with the featured image? As I'm mentioning 800px in the code, even the featured image is changing to 800px. I don't want it to be that big. What can I do about this? – Vyshnav Mar 30 '22 at 10:39