Image Width Capped

I don’t seem to be able to edit/delete my original post, but I wasn’t happy with how s l o w the shared server space is, so I decided to dive in head-first and try to install WordPress manually on an Ubuntu server.

So, for the time being, the page is wholly in accessible, but the question remains unsolved — the width of images seemed capped to a lower value than the width of the page.

Hi ??

Which template are you using?
And I guess you are referring to the regular image blocks you can add with the Gutenberg editor?

cheers

I’m using the Twenty Twenty theme, and yes, I mean images blocks with the Gutenberg editor.

I can see when using customizing CSS that the general page width for context and other elements expands or contracts as expected, but the image only expands so far and seems capped less than the rest of the content.

The site should be back live again, though now it has all of the default starting content. I’ll throw an image on there so someone can look at it, though.

Edit: Found the edit button, huzzah! The front page is now displaying the problem well, I think. https://sukidesu.live The images do appear as expected in the editor, but not live.

• This reply was modified 3 years, 9 months ago by sushikishi.
• This reply was modified 3 years, 9 months ago by sushikishi.
• This reply was modified 3 years, 9 months ago by sushikishi.

Could you try adding the following costum css and see if it provides the intended result?

.wp-block-image .size-full,
.wp-block-image .size-full img
{
    width: 100%;
}

This should set the last image to the probably expected 100% width.
It is not quite obvious but the wp-block-image wraps the containing img tag in a figure which also needs the width to be set in this case. This is done using the .size-full class selector which is applied to said figure.

Be aware though that this css will change the intended semantics of size-full for your entire site.

If you run into problems and rather want to target specific images only, I recommend adding a custom css class (e.g. full-width-img) to the gutenberg block properties. Afterwards you will need to correspondingly update the css above to use .full-width-img.

You will also have to ensure the correct image resolution will be used but that’s dependant on the block settings of the image.

Hope this helps

• This reply was modified 3 years, 9 months ago by Anonymous User 14254218.

Ahh, see, I understood how what you told me works, I just don’t always know what elements to have the CSS update for the thing I want to manipulate. I guess I’m hitting that “back in my day” part of my life now, I remember just typing in what I wanted where I wanted blah blah blah CSS grumble grumble grumble. I had fun in tech classes in middle and high school, mostly just stuck to WordPress stuff after that without diving too much into CSS and really tweaking the themes, then I just haven’t done any sort of web content outside of streaming to Twitch, so I’m still trying to cobble together the bits and pieces of things I picked up over time into something workable.

My best bet is probably to add the custom class. Even if what I wanted was to allow all of the images as much space as they want I don’t know how that will affect things elsewhere in the theme, and if I break something at least it’ll just be that one thing.

Thank you so much!