Jump to content

The Alpha Bug Tracker is now closed.

👉 Please post any new bugs to the Invision Community v5 bug tracker.

Cover Images Extending Out of Bounds [Alpha 9]

Dreadknux

By Dreadknux

  • Status: Not a bug

Seems to happen on profile hovercards and on Tag pages which don’t have a cover image set.

Screenshot 2024-08-15 at 10.32.56.png

^ This one extends a fair distance outside of the boundaries of the covercard.

Screenshot 2024-08-15 at 10.33.27.png

^ This one goes a little crazy and goes waaaaay off the page! :)

EDIT: Just saw it on profile page too, when checking reputation (it doesn’t go OOB when checking the profile page in general):

Screenshot 2024-08-15 at 10.42.06.png

And again on a Tag page, this time with an uploaded cover image, on a mobile view (note: this screenshot was made on a desktop browser with the browser window narrowed to mobile width, not on an actual mobile device, if that helps):

Screenshot 2024-08-15 at 10.44.30.png

    •
    Go to bugs

    User Feedback

    Recommended Comments

    Dreadknux Enthusiast

    Dreadknux

    Members
    comment_199

    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;
}
  • Quote
    • Dreadknux Enthusiast

    Dreadknux

    Members
    comment_200

    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! 😅

  • Quote
    • Like 1
    Guest
    Add a comment...