Fixing page width overflow after bottom cards change #276
Conversation
✅ Deploy Preview for neo4j-docs-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
src/css/docs-ndl.css
Outdated
| body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody { | ||
| flex: 0 0 152%; | ||
| body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody>div.sect2 { | ||
| flex: 0 0 49%; |
There was a problem hiding this comment.
I think targeting >div.sect2 is the right way to go, but we need something more specific, because this also affects cards on other pages. Any page where there is a cards section will have this applied to the last set of cards.
There was a problem hiding this comment.
Actually I've been looking at nth-child and nth-last-child and while there's some things we can do with it, we might want to just create a class that displays two cards on a row and then add that as a role on sections of pages where we want to use it.
Or we could have something slightly 'interesting'...
body.docs-ndl .doc > div:nth-child(even of .cards) .sectionbody > div:nth-child(-n + 2 of .sect2) {
flex: 0 0 49%;
}
In every even numbered set of cards, the first two cards will be half-width.
There was a problem hiding this comment.
I think we will need a new class. Even this suggestion that you made is breaking the subpages too. I will see what I can do.
There was a problem hiding this comment.
Yes, this change would apply to those pages as well.
There was a problem hiding this comment.
I think I fixed it now, but one thing that was broken in the ui preview was in the hub page, icons with bigger resolution would expand and overflow, and icons with smaller resolutions and png wouldn't "grow". We could enforce a max-width, but on the live website, all icons seem to be in the right size and in case some are not, I can just re-upload to the proper size.
No description provided.