pitrouillesque, French
@pitrouillesque@ohai.social avatar

Hi, there's #nostupidquestions right?
I have a #selfhosted #wordpress #blog. Is there a #plugin I can use so that all my #pictures #size adjust to the #screensizes of my visitors? Currently pictures in the content column go into the sidebar, which is quite annoying to be honest. Any help would be appreciated, I have no idea what to do! #wordpresshelp #wordpresstips #compatibility #help #codinghelp

thomas,
@thomas@thomaspreece.net avatar

@pitrouillesque Can you post / DM me a link to an example of an affected page? I'll take a look - there's usually a pretty simple solution.

pitrouillesque,
@pitrouillesque@ohai.social avatar

@thomas Hi, typically it would be something like this with a pic on the side https://lesalondivinatoire.fr/2023/07/06/que-represente-le-sabbat-des-sorcieres-une-introduction-a-cette-image-mythique-1/
The weird thing is some users complain about it but i dont experience the issue and the theme is supposed to be mobile friendly. The other mystery is i dont experience the issue anymore but no one disagrees when its pointed out, even in my friend group since one of my friends is having the issue. Since i said i tried to fix it, i guess the others would have told me it was working now

thomas,
@thomas@thomaspreece.net avatar

@pitrouillesque (1/4) It looks like the problem is that the images in the body text are all specified to be a particular size in pixels, without reference to the screen size. So on very narrow screens (ie, phones) they can end up being too large and running off the side of the screen. If you're not seeing the issue, my guess is that you have a large (or high-resolution) phone, and all the images fit on your screen without any problems.

thomas,
@thomas@thomaspreece.net avatar

@pitrouillesque (2/4) To fix this, you could try adding the following code to Custom CSS, if your theme allows it (most do) - go to WP Admin -> Appearance -> Customize -> Custom CSS, and paste the following code into it. If there's any code already there, add this to the bottom.

div.entry-content img, div.entry-content figure { max-width: calc(100vw - 3.5rem) !important; }

thomas,
@thomas@thomaspreece.net avatar

@pitrouillesque (3/4) What this code does: for all images (img) and figures inside the main part of the body text (div.entry-content), set the maximum width to the same as the body text on mobile (calc(100vw - 3.5rem)), and override any other setting of max-width (!important).

As each image has a specified width, it will display at that width until it becomes larger than the maximum width set above, in which case the maximum width will take precedence and the image won't run off the screen.

thomas,
@thomas@thomaspreece.net avatar

@pitrouillesque (4/4) I've tested the code in my browser and it seems to work fine without introducing any other issues - but if you find it doesn't help or it causes any problems, you can just go back to Custom CSS and delete that line, and it'll put everything back as it was before.

I hope that helps!

pitrouillesque,
@pitrouillesque@ohai.social avatar

@thomas Thank you so much, fixed the issue it was caused by an app but a free theme on another wordpress made me believe in hell. I shall do that. Thanj you so much once again

pitrouillesque,
@pitrouillesque@ohai.social avatar

@thomas since it wasn’t working for anyone before

  • All
  • Subscribed
  • Moderated
  • Favorites
  • NoStupidQuestions
  • magazineikmin
  • Youngstown
  • khanakhh
  • slotface
  • InstantRegret
  • Durango
  • mdbf
  • everett
  • kavyap
  • rosin
  • thenastyranch
  • GTA5RPClips
  • Backrooms
  • tacticalgear
  • JUstTest
  • hgfsjryuu7
  • cubers
  • osvaldo12
  • ethstaker
  • anitta
  • cisconetworking
  • DreamBathrooms
  • normalnudes
  • tester
  • provamag3
  • modclub
  • Leos
  • lostlight
  • All magazines