dfabulich
commented
2 months ago No time to work on this now, but here's what I think I've figured out.
Prior to the mobile redesign, the sidebar was floating to the right, which would force later sections to wrap around it.
During the redesign, I changed it to absolute positioning. That worked when the title, description, etc. were taller than the sidebar, but when they're shorter than the sidebar, the sidebar overlaps the page's content.
I think we have to make the sidebar float again in desktop mode. But, in order to do that, the sidebar content has to be the first content in the page, which would be bad in mobile mode. The sidebar would appear first on the page, above the game's title, author, description, etc.
I think a good fix for this is to make the mobile page be a giant flexbox component, and then to use CSS order to force the summary + description to appear above the external links. The desktop page would disable flexbox (because floating doesn't work when you're in a flexbox) and let the external links float right.
Like this:
<style>
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.header {
order: -1;
}
@media (min-width: 60rem) {
.container {
display: revert;
}
.sidebar {
float: right;
}
}
</style>
<div class="container">
<div class="sidebar">3 External Links</div>
<div class="header">1 Summary</div>
<div class="header">2 Description</div>
<div>4 Tags</div>
<div>5 Game Details</div>
</div>
notquitethere
In games with tons of download links, no reviews, and several tags, the tags can overlap the download links.
https://ifdb.org/viewgame?id=xdnexffbps4qfu3k https://ifdb.org/viewgame?id=utczzxri79tnmtv6