Tagged: bug, css, responsive
- This topic has 9 replies, 2 voices, and was last updated 7 months ago by
GBrassQ.
-
AuthorPosts
-
February 1, 2024 at 10:38 pm #332045
GBrassQ
ParticipantHello,
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:
Mobile screenshot:
https://imgur.com/a/ffbWpjjFebruary 2, 2024 at 12:37 am #332049tikaram
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,
TikaramFebruary 2, 2024 at 5:18 pm #332058GBrassQ
Participanthttps://goldbrassquintet.com/
This is the website.Thank you
February 5, 2024 at 1:47 am #332100tikaram
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,
TikaramFebruary 5, 2024 at 8:41 am #332108GBrassQ
ParticipantThank 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.I used a pixel 7 emulator to reproduce the error.
February 6, 2024 at 7:28 am #332145tikaram
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,
TikaramFebruary 6, 2024 at 12:40 pm #332146GBrassQ
ParticipantSure thing.
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 #332165February 7, 2024 at 10:35 am #332171tikaram
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,
TikaramFebruary 7, 2024 at 1:50 pm #332181GBrassQ
ParticipantThank you Tikaram.
That worked. I appreciate your wisdom!
-
AuthorPosts
- The topic ‘Responsive Image Block’ is closed to new replies.