Responsive Image Block

Tagged: bug, css, responsive

This topic has 9 replies, 2 voices, and was last updated 10 months, 2 weeks ago by GBrassQ.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
February 1, 2024 at 10:38 pm #332045

GBrassQ
Participant

Hello,

I am using WP 6.4.3 and very few plugins with Chique Music theme. The block images aren’t responsive. Any ideas on how to fix this?

Desktop screenshot:

https://imgur.com/a/gmmT832

Mobile screenshot:
https://imgur.com/a/ffbWpjj

February 2, 2024 at 12:37 am #332049

tikaram
Participant

@gbrassq : Please post in your site URL so that I can check for issues on your site and provide you the required fix.

Regards,
Tikaram

February 2, 2024 at 5:18 pm #332058

GBrassQ
Participant

https://goldbrassquintet.com/
This is the website.

Thank you

February 5, 2024 at 1:47 am #332100

tikaram
Participant

@gbrassq : I checked your site on a mobile device and I don’t seem to find any issues with images on mobile devices. Can you please check your site again and let me know. I have attached the screenshot of the page as mentioned above.

Regards,
Tikaram

February 5, 2024 at 8:41 am #332108

GBrassQ
Participant

Thank you for your time Tikaram.
If you use developer tools, and mimic Mobile behaviour in desktop you will see the distortion of the text that renders with the image. The image is not downscaling.

https://imgur.com/a/uYx0L2l

I used a pixel 7 emulator to reproduce the error.

February 6, 2024 at 7:28 am #332145

tikaram
Participant

@gbrassq : Can you please try testing it from a mobile device and provide me device details so that the actual results can be obtained rather than from developer tools or emulators.

Regards,
Tikaram

February 6, 2024 at 12:40 pm #332146

GBrassQ
Participant

Sure thing.

https://imgur.com/a/zv5S05V

iPhone xR 2018 from the browser Safari.

As you see, the image should shrink a little to allow more text to be displayed. The image is not shrinking, it is staying at 245 px

Thank you for your help

February 7, 2024 at 7:31 am #332165

tikaram
Participant

@gbrassq : I will check for the issue and get back to you soon.

Regards,
Tikaram

February 7, 2024 at 10:35 am #332171
tikaram
Participant
@gbrassq : Login to your WordPress admin section. Go to Appearance => Customize => Additional css and add the following additional css.
```
/* Max Width for Left and Right Aligned Image in Smaller Devices */
@media screen and (max-width: 960px) {
  .wp-block-image figure.alignleft,
  .wp-block-image figure.alignright {
    max-width: 30%;
  }
}
```
Please try increasing or decreasing the value of max-width as per your design needs

Regards,
Tikaram
February 7, 2024 at 1:50 pm #332181

GBrassQ
Participant

Thank you Tikaram.

That worked. I appreciate your wisdom!
Author

Posts