Skip to content

Instantly share code, notes, and snippets.

@westonruter
Created September 15, 2023 00:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/fc251e8f0917ae4135b3334273360be8 to your computer and use it in GitHub Desktop.
Save westonruter/fc251e8f0917ae4135b3334273360be8 to your computer and use it in GitHub Desktop.
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"id":112,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://example.org/wp-content/uploads/2023/09/image.jpeg" alt="" class="wp-image-112"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/136485307@N06/21912132615" target="_blank" rel="noreferrer noopener">AS17-152-23275</a>" by <a href="https://www.flickr.com/photos/136485307@N06" target="_blank" rel="noreferrer noopener">Apollo Image Gallery</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:image {"id":115,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://example.org/wp-content/uploads/2023/09/image-3-1024x1024.jpeg" alt="" class="wp-image-115"/><figcaption class="wp-element-caption">"<a href="https://www.rawpixel.com/image/8718239/photo-image-moon-space-planet" target="_blank" rel="noreferrer noopener">Taken by Apollo 8 crewmember</a>"/ <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">CC0 1.0</a></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"id":113,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://example.org/wp-content/uploads/2023/09/image-1.jpeg" alt="" class="wp-image-113"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/136485307@N06/21517152309" target="_blank" rel="noreferrer noopener">AS17-136-20710</a>" by <a href="https://www.flickr.com/photos/136485307@N06" target="_blank" rel="noreferrer noopener">Apollo Image Gallery</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
@westonruter
Copy link
Author

The Columns block automatically stacks columns vertically on mobile. The columns can have different widths:

image

If the initial column is not the widest, this can result in there being a different LCP elements on desktop vs mobile (LCP element in red outline):

Mobile LCP Element Desktop LCP Element
image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment