-
Notifications
You must be signed in to change notification settings - Fork 104
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
fix: fixed responsiveness issues on mobile view #1133
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## 2u-main #1133 +/- ##
===========================================
+ Coverage 67.12% 69.25% +2.12%
===========================================
Files 51 72 +21
Lines 864 1210 +346
Branches 177 272 +95
===========================================
+ Hits 580 838 +258
- Misses 274 357 +83
- Partials 10 15 +5 ☔ View full report in Codecov by Sentry. |
<p className={classNames([ | ||
'm-0 color-black', | ||
isMobileView ? 'h5' : 'h4', | ||
])} | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use this <p className={classNames('m-0 color-black', {
'h5': isMobileView,
'h4': !isMobileView,
})}>
<p className={classNames([ | ||
'mb-0', | ||
isMobileView ? 'x-small' : 'small', | ||
])} | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as above
<p className={classNames([ | ||
'font-weight-bold text-primary-500 m-0', | ||
isMobileView ? 'h3' : 'h2', | ||
])} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
follow above pattern for classNames and change wherever used
</p> | ||
); | ||
const UsernameDescription = () => { | ||
const isMobileView = useWindowSize().width <= breakpoints.small.minWidth; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reuse created hook
Ticket: INF-1708
Fixed responsiveness issues on mobile and tablet views.
Laptop View 1440px:
Laptop View 1024px:
Tablet View 768px:
Mobile View 425px:
Mobile View 375px:
Mobile View 320px: