Last image in gallery too big despite flex-grow set to 0

  • Resolved fvelmntnja12

    (@fvelmntnja12)


    1 year, 4 months ago

    Hello, The last image in my gallery is too big on mobile. I want it to be same size as other photos in gallery which are side by side. This only happens in mobile as in desktop site there are 9 pictures and three columns so they line up, unless I zoom in… then the last image takes up the whole screen while the others go to two columns. I am using twenty twenty-three theme. I checked the forums and found https://wordpress.org/support/topic/size-of-last-photo-in-gallery/ and changed all the flex-grow to 0 wherever it said gallery in style.css, especially at

    .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item, .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image, .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item {
    margin: 0 1em 1em 0;
    display: flex;
    flex-grow: 1; <- changed that to 0
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: calc(50% - 1em);

    I edited that in /wp-includes/css/dist/block-library/style.css. I even tried it with !important and inherit. I even tried pasting the above code into my stylesheet. However to no avail because the last image in gallery is still taking up the whole screen as compared to the others which (in mobile – google chrome app) are still in two columns. Please if you can assist me, I am not a coder but I have little knowledge of how to edit codes. I posted this fixing WordPress but I received no response so I thought that maybe I posted it in the wrong forum. Thanks

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • uxl

    (@uxl)

    1 year, 4 months ago

    Try this custom CSS:

    .wp-block-gallery.has-nested-images figure.wp-block-image:last-child {
  flex-grow: unset;
}

    It is not advisable to edit WordPress files such as /wp-includes/css/dist/block-library/style.css as your changes will be undone when WordPress is next updated.

    Instead you can add the custom CSS to the ‘Additional CSS’ section of the old style customizer which can be accessed directly by adding /wp-admin/customize.php to the end of your site URL.

    Thread Starter fvelmntnja12

    (@fvelmntnja12)

    1 year, 4 months ago

    wow it really worked thank you. and thanks for the tip on wp-admin/customize.php

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Last image in gallery too big despite flex-grow set to 0’ is closed to new replies.