You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Inspect the page in the responsive mode with a viewport width below 670px.
Check the header navbar at the top.
What is expected?
All the aligned elements should be adjusted so that the navbar row doesn't look congested in the smaller devices.
What is actually happening?
All the navbar elements are so close that the space in the row has run out and now the text of the online builder button and the sign in text is broken.
Solution
Remove the margin-left and right from the nav tag for the smaller devices.
Change the media query for the margin right applied to the navbar-collapse div just after the breadcrumb.
Remove the sign in text. The icon will do enough for mobile users.
Make the type here input full width by using flex:1, and apply flex-wrap: wrap to its flex parent. This will shift the content after the input to the next row. Creating space for writing in the input and adjusting the rest of the row content.
Shift the hamburger icon next to the right of the breadcrumbs for a better user experience.
Remove extra spacing(padding, margin) created around list items of navbar-nav ul. Instead, use justify-content: space-between.
Adjust the font size and padding of the online builder button.
Additional comments
The text was updated successfully, but these errors were encountered:
Thank you for using our products and for letting us know about this issue. We will fix this issue in the next product update - also, thank you for your solution.
Version
2
Reproduction link
https://demos.creative-tim.com/material-dashboard/pages/dashboard.html?ref=readme-md2
Operating System
Windows
Device
Acer Nitro 5
Browser & Version
Chrome(114), Firefox(114), Edge(114)
Steps to reproduce
What is expected?
All the aligned elements should be adjusted so that the navbar row doesn't look congested in the smaller devices.
What is actually happening?
All the navbar elements are so close that the space in the row has run out and now the text of the online builder button and the sign in text is broken.
Solution
Additional comments
The text was updated successfully, but these errors were encountered: