Pictures-Responsibility

Hello dear support team,

I have around 85 sub-pages on my website and on each page there is a picture for decoration to loosen up the text. In addition, there are various other images in the other texts.

My problem is that these pictures have a fixed width and height from me, so that they are all the same size, but they are not responsive. However, I would like the pictures not to be displayed too large on smartphones, tablets etc. and the text should also flow around them correctly. The image width should take up a maximum of 50% of the screen, but not exceed the width of 235px and the height of 176px.

Is there an easy way I can do that for all the pictures on my page? I’m not that fit when it comes to programming. I’ve found that every image has the alignleft wp-image-482 class, but I don’t know how to access it. I also found the following CSS code online:

.image {
width: 100%;
height: auto;
}

However, I do not know where I can integrate it and this is also retained with theme updates. I have a child theme and here a style.css.

Can someone help me here or has a viable option for me, as I as a less experienced WordPress user can do that ?!

You can find my page at talhochzeit.de

Thanks in advance for any help!

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.entry-content img {
    max-width: 50%;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hello Roman,

thank you for your quick reply. I have inserted the code and when I look at the result on the PC in the preview for smartphones, it also works. If I look at it on my smartphone, then unfortunately nothing changes. Am I doing something wrong? I have a Samsung S7, that shouldn’t be a problem right ?!

Thanks again!

It can be a caching issue, please check this link for more details:
https://wordpress.org/support/article/i-make-changes-and-nothing-happens/

Kind Regards, Roman.
aThemes Support

Hello Roman,

sorry, it works. But something else just doesn’t work. I have already spoken of the fact that the images are surrounded by a text. Here I have inserted a fixed distance from the left edge of the screen. Can I do it with CSS that the distance between text and image is also responsive and give a certain distance?

These are unsorted lists due to an enumeration.

Sorry again, and thank you very much!

Here I have inserted a fixed distance from the left edge of the screen.

Can you please provide some explanatory screenshots?

One Screenshot from my smartphone:

One from my PC:

Hello,

I checked your site mobile view and it looks okay now:

So is this issue already resolved or you still need help?

Kind Regards, Roman.
aThemes Support

Hello Roman,

I initially set padding-left to auto. I had previously entered a fixed value (290px). With auto “stick” the list items directly on the picture and are not indented.

Can you help me in this regard?

Thanks again!

Hello,

It looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

Kind Regards, Roman.
aThemes Support

Hello Roman,

everything ok, no problem. Thanks for your great support! :+1:

Sascha

You are welcome Sascha!

And thank you for understanding.

Kind Regards, Roman.
aThemes Support