I am using the Twenty Twenty-Three theme for my WordPress site and I want to set the image max-width to 100%. However, when I add this CSS code to the customizer:
img {
max-width: 100%;
}
It does not work. The images still overflow the container and look distorted. I have tried different solutions from online forums but none of them solved my problem. How can I fix this issue? Is there a specific CSS selector or property that I need to use for this theme? Thank you for your help.
Hello, thank you for your question. I understand that you are using the Twenty Twenty-Three theme for your WordPress site and you want to set the image max-width to 100%. However, when you add this CSS code to the customizer:
img {
max-width: 100%;
}
It does not work. The images still overflow the container and look distorted. You have tried different solutions from online forums but none of them solved your problem.
One possible reason for this issue is that the Twenty Twenty-Three theme uses a different CSS selector for images than the generic img tag. According to the WordPress documentation, this theme uses a block-based approach to display images, and each image block has a class name of .wp-block-image. Therefore, you may need to use this selector instead of img to target the images in your theme.
Another possible reason is that the images have a fixed width or height attribute that overrides the max-width property. You may need to remove these attributes or set them to auto to make the images responsive.
To fix this issue, you can try the following CSS code and add it to the customizer:
.wp-block-image img {
max-width: 100%;
width: auto;
height: auto;
}
This code should make the images fit within the container and maintain their aspect ratio. I hope this helps. If you have any further questions, please let me know.