Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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

    #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

    #332058
    GBrassQ
    Participant

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

    Thank you

    #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.
    Screenshot-20240205-122546

    Regards,
    Tikaram

    #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.

    #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

    #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

    #332165
    tikaram
    Participant

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

    Regards,
    Tikaram

    #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

    #332181
    GBrassQ
    Participant

    Thank you  Tikaram.

     

    That worked. I appreciate your wisdom!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Responsive Image Block’ is closed to new replies.