Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected nesting on mobile layout #13

Open
tilde-engineering opened this issue Apr 21, 2022 · 2 comments
Open

Unexpected nesting on mobile layout #13

tilde-engineering opened this issue Apr 21, 2022 · 2 comments

Comments

@tilde-engineering
Copy link

CleanShot 2022-04-21 at 15 20 02@2x

Bronze cell is being styled by .epg_columnheader#bronze { @apply bg-bronze text-white }

On mobile, this header becomes the .epg_package-perk-list's parent.

CleanShot 2022-04-21 at 15 21 41@2x

I would not expect the perk list to inherit the styles of the columnheader but rather the perk-grid-body.

@gitKrystan
Copy link
Contributor

The header needs to be the parent in list view for the grid keyboard navigation. Can you mock up what you would like the final product to look like? My guess is you want the the descriptor and attributes ("sold out", "limited") wrapped in a header div w/ the bronze background and then separately have the perk list and price wrapped in a content div that doesn't have the bronze background?

Could get around this for now w/ CSS grid stuff.

@tilde-engineering
Copy link
Author

tilde-engineering commented Apr 22, 2022

My guess is...

Correct!
Heres where I ended up:
CleanShot 2022-04-22 at 12 15 34@2x

Colored bar is a pseudo-element unique to the list view. I think ideally I'd target the wrapper div you described.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants