[SOLVED] Image field and gallery image not responsive

Hi

The image field option looks (almost) ideal for something I'm trying to put together in a user profile tab; however, it doesn't seem like the images that are loaded are really responsive, including those from the default canvas gallery. Is there a solution to this that I'm missing?

Thanks

They're completely responsive. I've no idea what you mean by them not being responsive or what you're expecting from them. See the below for CB Gallery mobile output.



If any image within CB is not responsive for you then it's likely a CSS conflict from your Joomla template or custom CSS breaking it. No image should be overflowing its container and should shrink as needed to fit within its container.

Hi
Ah, okay, and thanks for such a quick response.

It isn't the Gallery plugin that I was referring to by the way, but a gallery option that is available when setting up an Image field, so that you can choose to load the images from the default profile canvas gallery, for example. Should this also be responsive when loaded in this way? I', guessing the answer is yes...

Thanks again.

The canvas background goes from 200px height to 125px height for mobile. The width is always 100% so it'll shrink based off the space available. It does not reposition as it doesn't need to. See the below comparison.

Desktop:


Mobile:

Thank you for following through on this.

I have attached a couple of images to show the issue.

I never have problems with the actual profile canvas image, on mobiles. It always works perfectly. It is just this image displayed in an image field which I have put in a profile tab.

Works perfectly fine in my tests. My guess is your template has some CSS conflicting with or changing the img-thumbnail Bootstrap class causing the max-width: 100%; to be removed. See the below of it working fine.



Black border on the right was added to show where the container div stops. The image would overflow without its styling.