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.

Sign up for GitHub

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

Jump to bottom

Topic teaser: breaks on 780+ #147

Closed
gfellerph opened this issue Jun 28, 2022 · 2 comments · Fixed by #162
Closed

Topic teaser: breaks on 780+ #147

gfellerph opened this issue Jun 28, 2022 · 2 comments · Fixed by #162
Assignees
@oliverschuerch
Milestone
Version 5

Comments

@gfellerph
Copy link
Member

The topic teaser breaks on screen sizes between 780 and 1024 when the image is on the left.

preview-115--swisspost-web-frontend netlify app_ (1)
@gfellerph gfellerph added this to the Version 5 milestone Jun 28, 2022
@oliverschuerch oliverschuerch self-assigned this Jul 13, 2022
@gfellerph
Copy link
Member Author

gfellerph commented Jul 13, 2022 •
edited by oliverschuerch
Loading

Additional errors to fix:

  • Left image should stay left, right image should stay right on mobile
  • Fix 1px rendering issue margin on large screens
  • Keep text content centered with consistent paddings
  • Change aspect-ratio of images on mobile to landscape, clip with object-fit

@oliverschuerch
Copy link
Contributor

@gfellerph The 1px rendering problem on large screens is because chrome (webkit) does not a proper subpixel rendering. Therefore it is not fixable with CSS.

@oliverschuerch oliverschuerch linked a pull request Jul 14, 2022 that will close this issue
fix(topic-teaser): refactors component topic-teaser, to make it work as expected by design #162
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oliverschuerch oliverschuerch

Labels
None yet
Projects
None yet
Milestone
Version 5
2 participants
@gfellerph @oliverschuerch