Gallery displays wrong on iPhone

  • honza.skypala

    (@honzaskypala)


    5 years, 9 months ago

    Hey there,

    I started to build a local blog on WordPress and I decided to try the new twenty-twenty theme. I like it, but I noticed a problem with it on an iPhone.

    If I put an image-gallery to a post — please notice the images are not square, but rectangle (they are pictures of playing cards), anyway they are all the same size — then it displays perfect on a PC in Chrome, but it displays incorrectly on my iPhone. There the pictures in the gallery are not rescaled proportionally, instead they keep their original height and they are cropped on width.

    This is a screenshot of how it looks on the iPhone.

    I switched Chrome into dev tools, set the device emulation to iPhone, but it still displays it correctly.
    Unfortunately I do not own Mac or any iPhone dev tools to troubleshoot what is the problem with iPhone.

    Anyway, as the site is pretty vanilla at the moment, generally just the template, then I guess this problem should occur on all twenty-twenty installations.

    Any help?

    • This topic was modified 5 years, 9 months ago by honza.skypala.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Nagesh Pai

    (@nagpai)

    5 years, 9 months ago

    I was able to replicate the error you have noted on safari browser.

    I was unable to replicate this on my own test site though.

    At a closer glance, I see that you have a custom CSS that reads like this

    .wu-card img, .wu-card .blocks-gallery-grid .blocks-gallery-image img, .wu-card .blocks-gallery-grid .blocks-gallery-item img, .wp-block-gallery.wu-card .blocks-gallery-image img, .wp-block-gallery.wu-card .blocks-gallery-item img {
    max-width: 300px;
    }

    disabling this CSS rule in the browser seems to fix this in Safari. You may want to check why this rule was added and try disabling the same to see how it works. The max width of the images would be anyway limited by the container width, so IMO the code may be redundant.

    I read this article on stack overflow that mentions how Safari browser has a problem resizing images if you force only width or height

    • This reply was modified 5 years, 9 months ago by Nagesh Pai.
    • This reply was modified 5 years, 9 months ago by Nagesh Pai. Reason: Explained the custom CSS code in detail
    Thread Starter honza.skypala

    (@honzaskypala)

    5 years, 9 months ago

    Hello Nagesh,

    thank you for your reply.

    It is true that I have a custom CSS on the website. Unfortunately, this is not the source causing the problem. Even when I remove my whole custom CSS, the problem still occurs on the iPhone (I tried).

    For now I have enclosed this single rule into

    @media ( min-width: 481px ) {
	.wu-card img,
	.wu-card .blocks-gallery-grid .blocks-gallery-image img,
	.wu-card .blocks-gallery-grid .blocks-gallery-item img, 
	.wp-block-gallery.wu-card .blocks-gallery-image img,
	.wp-block-gallery.wu-card .blocks-gallery-item img {
		max-width: 300px;
	}
}

    so the rule is not applied to mobile devices (including iPhone).
    The problem is still existing.

    If you would have another look at it, it would be great.

    Thank you. Take care

    • This reply was modified 5 years, 9 months ago by honza.skypala.
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Gallery displays wrong on iPhone’ is closed to new replies.