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

Code blocks not full width on mobile #1056

Closed
stephanlachnit opened this issue Jun 15, 2022 · 1 comment · Fixed by #1057
Closed

Code blocks not full width on mobile #1056

stephanlachnit opened this issue Jun 15, 2022 · 1 comment · Fixed by #1057

Comments

@stephanlachnit
Copy link
Contributor

The problem in a nutshell:

Screenshot from 2022-06-15 22-11-35

The culprit is assets/scss/shortcodes/cards-pane.scss. The file hard-codes a max-width, which works on a desktop-like layout, but not on mobile. I think the correct fix is to change the linked lines to

.card-deck {
	@extend .td-max-width-on-larger-screens;
}
.card {
    @extend .td-max-width-on-larger-screens;

It looks correct on most things, but I haven't tried this with all possible card-pane configs so I'm not entirely sure. Please let me know if I should open a PR.

@LisaFC
Copy link
Collaborator

LisaFC commented Jun 16, 2022

Yes, please do open a PR, thanks for spotting this problem! @deining can you comment/review?

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

Successfully merging a pull request may close this issue.

2 participants