Image spilling out of blog post

[dlukefinch]

I’m using the starter template FYI but the images are spilling out, particularly on mobile where they are completely cut off rather than being contained. How do I fix?

Winter 2023/24 Thoughts

[prakash_s]

Hello @dlukefinch,

Thanks for writing to us.

Please note that when you use the Stater Stack there is minimal styling for this stack. In order to align the image properly I would suggest you please add this custom CSS code to the Global CSS.

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.aligncenter { width:auto !important;}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[dlukefinch]

Well, you say that but I have been using the classic editor ever since gutenberg came out. I thought I’d disable it and see if that made a different and, to my surprise all the images were fine even on mobile. No need for your CSS it seems but will bare it in mind for the future.

[ruenel]

Thanks for letting us know.