Home page: Gradients card gets clipped
Đánh giá
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức phù hợp với người mới
- 78/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức độ hoạt động
- Sôi nổi
- Công nghệ
- react, tailwindcss, typescript
Hướng nghiên cứu
Bắt đầu trong src/components/home/why-tailwind-css-section.tsx tại div có các lớp -mt-27 -mr-124 -mb-8, sau đó kiểm tra cách kích thước và lề của nó tương tác với BentoBody ở các chiều rộng viewport khác nhau. Điều chỉnh bố cục để phần nội dung và các thanh của thẻ Gradients luôn hiển thị ở mọi chiều rộng. Xác minh rằng hiện tượng bị cắt đã hết ở chiều rộng được báo cáo là 1432px và dưới xl.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
The Gradients card in the "Why Tailwind CSS" grid is bigger than the BentoBody that holds it, so its content is cut at the right and the bottom.
src/components/home/why-tailwind-css-section.tsx, the div with-mt-27 -mr-124 -mb-8 ... xl:-mr-26- at 1432px: right edge 72px past the clip (heading, paragraph and the 6.4x / 4.2x / 2.7x values cut), top 76px above it (12px of "Power Meets Precision" gone), card 616px tall in a 448px body (the "Multi-platform build time" bar gone)
- below
xlthe right margin goes back to-mr-124(496px) while the card's own right padding is 64px, so more is cut on smaller screens
scrollWidth stays clean because the parent has overflow-hidden.
Expected: copy and bars stay visible at any width.
Measured at 1432×900 in DevTools responsive mode.
Screenshot below.
- Ngôn ngữ chính
- MDX
- Star
- 150
- Fork
- 78
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Chuẩn bị môi trường
Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của tailwindlabs/tailwindcss.com
-
Theme variables page doesn't explain how to override values for a dark themeCó thể đã có người làm @oyobbeb đã nhận 5 ngày trước. Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
tailwindlabs/tailwindcss.com#2526 ·
-
No central documentation of options @import optionsCó thể đã có người làm @MHJahanbakhsh đã nhận 75 ngày trước. Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 85/100
tailwindlabs/tailwindcss.com#2514 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 64/100
tailwindlabs/tailwindcss.com#2497 · 3 reaction ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
tailwindlabs/tailwindcss.com#2493 ·
-
Clarity on using colors in custom utilitiesCó thể đã có người làm Có pull request liên kết đang mở hoặc đã được merge. Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
tailwindlabs/tailwindcss.com#2473 ·
Tất cả issue của tailwindlabs/tailwindcss.com
Issue tương tự
-
enhancement parity priority: low
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
storytold/gridcraft#3053 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 2 ngày
-
[Feature]: Make the navbar have all the pages on the site and highlight/bold current page on navbarĐang mởEasy High
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
ChicoState/creditcardmatch#63 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
editor good first issue
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
webarkit/webarkit-studio#16 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
Maintainer thường phản hồi trong vòng 1 ngày
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
superdesigndev/treg#1324 ·
Maintainer thường phản hồi trong vòng 1 ngày