To prevent photos from scaling on the mobile version of your WordPress site
To prevent photos from scaling on the mobile version of your WordPress site, you can use a CSS rule to set a fixed image size.
Here’s how to do it:
1. Login to your WordPress admin panel.
2. Go to the “Appearance” tab and select “Editor”.
3. In the right pane, select the “style.css” or “Custom CSS” file (if available).
4. Paste the following CSS code at the end of the file:
“`css
@media(max-width: 767px) {
.entry-content img {
max-width: none !important;
height: auto !important;
}
}
“`
5. Click the “Update File” button to save the changes.
This code applies styles only to images inside the entry content (`.entry-content`) and only on devices with a screen width less than 767 pixels. It sets `max-width: none` and `height: auto` to prevent images from being scaled on the mobile version of the site.
After making changes, check your site on a mobile device to make sure the photos are no longer scaled.