Assistance Needed with Image Display Issue on WordPress

Hi @gkb2,

Here’s a shorter and more direct guide:

1. Resize Images Before Uploading:
   Use an image editor to crop or resize your images to the correct dimensions before uploading.
2. Check WordPress Media Settings:
   In WordPress, go to Settings > Media and ensure default image sizes match your theme’s requirements.
3. Regenerate Thumbnails:
   Use a plugin like “Regenerate Thumbnails” to apply size changes to existing images.
4. Avoid Stretching:
   When resizing images in the WordPress editor, hold Shift to maintain the aspect ratio and prevent distortion.
5. Update WordPress and Plugins:
   Keep WordPress and plugins up-to-date for the latest features and bug fixes.

These steps should help you maintain proper image proportions on your WordPress website.

https://gkb.pl/wydarzenie/zyczenia-swiateczne/

Here is the link to my website. I tried to follow your guidelines, but unfortunately, they are not working. The image looks fine in the WordPress editor, but when I upload it to the website, it stretches out. I don’t have access to the admin panel to update WordPress.

During a recent visit to your website, I noticed an issue with the CSS styles. No need to worry, though – there’s a straightforward solution to address this problem.
To resolve the issue, you can follow these steps:

Add Custom CSS Code:
You can incorporate custom CSS code to rectify the problem. Please add the following code to your website:

.archive .event-content img {
    width: 100% !important;
    padding: 10px;
}

Where to Add the Code: Insert this custom code into your WordPress theme’s style.css file, preferably within a child theme.

Need Help Adding Custom CSS?: If you’re uncertain about adding custom CSS to your website, refer to this helpful article. It provides a step-by-step guide on how to add custom CSS to your WordPress site: How to Easily Add Custom CSS to Your WordPress Site.

I hope this solution proves effective in resolving the CSS style issue on your website.

Rohit’s solution has one problem. Height is still coming from the tag’s height attribute, which means that the image will either be stretched or squashed based on its original dimensions.

Use the following if you want to keep the images at 25% width (coming from existing style):

.archive.event-page .event-content img {
    height: auto;
}

Or the following CSS to have them follow the original dimensions but stay within the container:

.archive.event-page .event-content img {
    height: auto;
    width: auto;
    max-width: 100%;
}

You can change width to100% to force them full width.