Hey, I made main app page responsive #29
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Defined viewport to prevent horizontal scrolling.
Liked to Normalize.css CDN which will help to add consistency to browser styling across various browsers.
implemented universal box sizing reset with inheritance
The default styles will be made with mobile users in mind. Next, breakpoints will be added using the @media query to add styles for desktop/laptop/widescreen devices
Changed the old navbar to a new one that collapses on smartphones to a menu toggle. This required heavy changes to structure of header. The current structure is much simpler. It was taken from Bootstrap's documentation on navigation bars. Also: Included link to Bootstrap JavaScript in the <head>. This was required for the menu toggle to work.
on hovering on a navbar element, the 2px border that would appear below would make the elements move up by 2px. I solved this problem by adding a 2px transparent border during no hover, so the elements would be shifted up by 2px at all times and therefore no movement while hovering
...by using z index. This was needed because the <div> on the right was getting on top of this left <div>.
This declaration created a big ugly gap between it and the next <div> on mobile. Didnt remove it entirely and instead commented because it is weirdly specific and might be important later. I dont know though.
|
Great Work @waseemyusuf |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is what is the responsive page now looks like on this branch: