Cover Images Extending Out of Bounds [Alpha 9]

I dont seem to be able to replicate this one. What browser are you using there?

I’m using Google Chrome Version 127.0.6533.100 (Official Build) (arm64) on macOS 14.5

Can’t reproduce on Chrome 127.6533.119 MacOS 14.5

Do you have any custom CSS that may interact with this? Can you reproduce on this forum?

Ohhhh… now that you mention it… 🫢

I do have some custom CSS applied that may conflict with this, and may be causing it. I was trying to remove the padding/margins between the cover image and the edges of the content box (so that it would stretch to the edges), while also applying border-radius on the top corners while removing them in the bottom corners (so that it would transition nicely into the main content). I imagine I may have experimented a little poorly.

For the record, this is the relevant custom CSS I’m using, but I guess it needs adjusting so that the images don’t go out of bounds?

/* Cover Photo Ratios and Margins */
.ipsCoverPhoto_container {
	--_margin: 0;
	border-radius: var(--i-box--bo-ra) var(--i-box--bo-ra) 0 0;
	--_mobile-ratio: 2.4; /* This is to resize the height of the cover photo in mobile view as it's currently too tall IMO */
}
@media (max-width: 767px) {		
	.ipsPull .ipsCoverPhoto_container {
		border-radius: 0;
	}
}

/* Remove Cover Photo for Wiki Entries */
body.cCmsDatabase_wiki .ipsCoverPhoto {
	display: none;
}

Update: I found five minutes to play with my custom CSS code, and it turns out the culprit was this line:

.ipsCoverPhoto_container {
	--_margin: 0;
}

I had set a value of ‘0’ for this, which was causing the margins on the cover image containers to mess up. Once I changed it to ‘0px’, it appeared to fix the problem.

Thanks for your attention on this - simple user error, after all, not a bug! 😅

All good. Its good to have you playing with it and seeing what you can do :)

Changed Status to Not a bug