Gutenberg gallery generates "Properly size images" in mobile view lighthouse

Hi,

Deactivated WP Rocket. Cleared browser caches. Put Cloudflare in development mode.

With the supplied code it still goes from one column to 4 columns at 600px

Glad to hear that our support has been helpful.

I edited the code one more time as it was being overwritten by something else - now it should make everything 2 columns from 769px to 1024px and 1 column below 768px.

If you need further tweak with this, please start a support topic with WordPress or a general Stackoverflow forum.

You could also consider hiring a developer at https://codeable.io/ for a few hours to tweak all the none-GP related CSS for you. Might be more efficient for your time this way.

Hi,

The revised version without the typos as follows works great. Thanks

/* Gutenberg image gallery single column at 768px two columns between 769px & 1024px */
@media (max-width: 768px) {
	.blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery.wp-block-gallery.columns-4 .blocks-gallery-item {
		width: 100%;
		margin: 0.5em 0;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery.columns-4 .blocks-gallery-item {
    width: 50% !important;
    margin: 0.5em 0;
  }
}

We already have a developer. He owes us about 8 hours of dev time. I helped him optimize the hell out of one of his major client website that he couldn't figure out :) It was really bad. Took about a days work. He begged me to help him. I can't code very well. He can code like a rocket scientist. I can optimize the crap out of any WordPress website that doesn't have a page builder and bring it at 100 for everything in web.dev ;)

Still think you need a vacation with an overdose of sun :)

Thanks for your help.

No problem.

I'm happy to be in the snow :)