[Resolved] Gutenberg gallery generates “Properly size images” in mobile view lighthouse

[Dominique]

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

[Leo]

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.

[Dominique]

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.

[Leo]

No problem.

I’m happy to be in the snow 🙂

[Author]

Posts