Open petesfrench opened 2 months ago
@petesfrench What browser & dimensions was the "before" snapshot taken in?
I'm able to slightly reproduce this on u.com but not to the severity shown in your "before" screenshot:
@petesfrench Haven't investigated your demo code yet, but my first read from looking at the code as it currently exists on u.com is that you wouldn't need the no-divider
class to remove the first divider if the first divider block was the first element in the divider.
Because your <p>
with "Available everywhere" is also a child of the divider, it causes the need for no-divider
. Maybe you can place it in another element on top of (outside) the divider.
The divider line is being hidden for divider blocks that are the first child of their parent.
See sass src: https://github.com/canonical/vanilla-framework/blob/d0197b27f5733789d6d23536eabe68356e045ae1/scss/_patterns_divider.scss#L47
I'll check out the responsiveness issue now
@jmuzina I have chosen to include the initial divider here as otherwise it looks like this:
I am on Ubuntu/Chrome.
Hey @jmuzina, sorry, could you take another look at this please? It got a little lost
To me, this makes the page look a little broken. Why are we using this component on the rebranded pages? It is part of the old style we're moving away from, and as you can see, the line protrudes strangely on the left of things:
It also leads to a broken grid:
As far as I'm aware, the divider component was meant to be used at the full fixed width, so this would fall under incorrect usage, rather than something that requires an enhancement. Happy to provide an alternative design if UX is ok with me doing so?
Done
p-divider
class, I had to update it to fit a specific screen size where the content was overlapping instead (see screenshot below)QA
Issue / Card
Fixes n/a
Screenshots
before:
after:
![image](https://github.com/canonical/ubuntu.com/assets/58276363/15256f07-8f42-4567-9467-7245ca8b0812)
Help
QA steps - Commit guidelines