Centered Images not sizing correctly

  • maxkim

    (@maxkim)


    5 years, 7 months ago

    Hi,

    When I center my images, the size I’m setting in WordPress Gutenberg Editor isn’t being applied.

    For an example, see this article: https://giftingarea.com/quinceanera-gifts/. All images in this article were uploaded at 800×800 and were then set to be 400×400.

    The first image is centered, and is the incorrect size. The second image isn’t aligned, third image is aligned right, and 4th image is aligned left. All these images are sized correctly.

    When I inspect each picture, they’re all apparently pulling their size from a line in my style sheet. Now, there are a few problems with this:

    Shouldn’t my style sheet be overwritten by any specifications I make in Gutenburg?

    Why are some of the images sized correctly if they’re all pulling from the same line?

    Even when I make changes to that line in the stylesheet, nothing happens (This may be because of certain cache/minify settings I have, but clearing the cache failed to make a difference).

    Any help would be greatly appreciated!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Niall Madhoo

    (@nm1com)

    5 years, 7 months ago

    Hello @maxkim,

    The first image is missing the wp-block-image class that the other images have. That is why it displays differently. On the first image, it is set on a div rather the figure element. Some of the other images have it set on the figure element, while others do not.

    First image:


    Second image:


    Third image:


    That means they will display differently, as they have a different element set to the same wp-block-image class.

    Looking at the html output of your code, all the images are set to be 400×400. They all follow the img element set to max-width: 50%; on line 219 of your style.css file.

    If I remove the max-width: 50%; or set it to max-width: 100%, the images resize. Using the max-width: 50%; rule gives the 200×200 sizing.

    The first image is also larger because the aligncenter element has a max-width: 100%; width: 100%" setting. The default alignment,alignleft, and alignright do not specify any widths. This width is necessary for the centering to work correctly. So this image displays at the 100% of 400×400, meaning 400×400. The others display at 50% of 400×400, meaning 200×200.

    As far as I can see, the Gutenberg code is working correctly. Some of the HTML elements and classes need to be changed for the alignments and sizing to work correctly based on how your theme is set up.

    My guess is that your theme overrides the style.css file automatically, which is why changing that file does not work. A better way to add or override CSS in WordPress is to use the Additional CSS option in the customizer under Appearance > Customize: https://wordpress.org/support/article/appearance-customize-screen/

    I recommend setting up the images again so that they have the same HTML structure. You will probably need to set the images inside a placeholder to ensure that the alignments work correctly without affecting the image sizes.

    If not, then set the figure classes to aligncenter then you can add .wp-block-image img {max-width: 25%} to the customizer to get the images to display at 200×200.

    Thread Starter maxkim

    (@maxkim)

    5 years, 7 months ago

    Ok, so for some reason I’m seeing different things than what you’re seeing @nm1com

    For starters, all images were uploaded at 800×800, then resized in Gutenberg to show at 50%, or 400×400. This works whenever I don’t center an image, so all non centered images show as 400×400 for me. However, it does NOT work for centered images, so the centered image shows at the original 800×800 size.

    Line 219 in my stylesheet is the line I mentioned in my original post. It originally said max-width was 100%, so I tried changing it to 50%. However, when I inspect the element that line still shows up as 100% for me.

    The above discrepancies happen regardless of how many times I clear the cache, and happen on every desktop browser I’ve tried. Do you know what I’m doing wrong?

    Also, do you know why my images are using different classes for these images? I don’t think I did anything differently when uploading them. How would I fix it so that all images are using the same elements?

    Niall Madhoo

    (@nm1com)

    5 years, 7 months ago

    This is what I’m seeing:











    As for the classes and elements, those should have been generated automatically. Try deleting the images from the page and adding them again.

    Your site is running on CloudFlare, which might explain why clearing the cache in W3 Total Cache and your browsers does not work. Please follow this guide to clear CloudFlare’s cached resources: https://support.cloudflare.com/hc/en-us/articles/200169246-Purging-cached-resources-from-Cloudflare. That might help fix the caching issue, so that you can view the changes you make to your site.

    Thread Starter maxkim

    (@maxkim)

    5 years, 7 months ago

    I’ve tried deleting the cloudflare cache the way you described, and it didn’t work – I still don’t see the pictures the same way as you. Instead, the top picture is aligned to the center and is full size, 800×800.

    I set the top picture to be aligned center, so I’m not even sure why it would be aligned left for you. I also changed the element types to be consistent, and am still getting the same problem: when I center an image the size blows up to full size, and when I align it to the right or left the size is correctly switched to 400×400 on my end.

    So confused by this. I can’t understand why it’s happening.

    Niall Madhoo

    (@nm1com)

    5 years, 7 months ago

    I mentioned why this is happening previously:

    The first image is also larger because the aligncenter element has a max-width: 100%; width: 100%” setting. The default alignment,alignleft, and alignright do not specify any widths. This width is necessary for the centering to work correctly. So the first image displays at 100% of 400×400, meaning 400×400. The others display at 50% of 400×400, meaning 200×200.

    Thread Starter maxkim

    (@maxkim)

    5 years, 7 months ago

    But the top image showed as 800×800 and the others at 400×400. According to your comment the top one should be 400×400 and the others 200×200.

    Plus, the top one shouldn’t be aligned to the left, it should be in the center. But in your picture it was aligned to the left.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Centered Images not sizing correctly’ is closed to new replies.