Image in Mobile not shrinking correctly

Support
#1

Hey guys, me again.

I attached a screen shot from my mobile showing the issue, it’s not shrinking the book picture to fit the iPhone screen? I tried a few codes from other threads but couldn’t get it to work.

Thanks

#2

Hi David,

Thank you for writing in, but we can not replicate the issue on our end, in this happening only to a specific device? try clearing your phone’s browser cache.



Cheers!

#3

Hey guys,

Maybe I should have been a little more specific. On my main page it’s showing up fine. It’s when you go to one of my blog posts and scroll down to where I inserted my global block - that is where the issue is happening.

Dave

#4

Hi Dave,

Thank you for the clarification, that is happening because your image has a fixed width of 500px, so it remains 500px regardless if the screenshots gets lower than 500px. To resolve that, please add this to that image’s Element CSS area.

@media (max-width: 767px) {
	$el.x-image {
		width: 100% !important;
	}
}

Hope it helps,
Cheers!

#5

Hey Friech,

Thanks for that CSS. It looks like it helped but didn’t total solve the issue. The right edge is still snipped off, but I think the issue may be that the image needs to be centered on mobile? It seems to be right-centered on the screen?

Thanks

#6

Hi Dave,

The image is already centered. Where did you add the CSS provided? I don’t see it being apply. Please make sure you add it on the Image’s Element CSS area.



Also, clear your caching plugin and browser cache so the changes will take effect immediately.

Thanks,

#7

Yup I had the CSS in the wrong spot. This fixed it - thanks

#8

You’re welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.