implemented two column layout for footer in mobile view #1946
Conversation
Signed-off-by: Sneha Singh <[email protected]>
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Thanks, @snehaio ! |
There was a problem hiding this comment.
Thanks @snehaio! Can we do something to align the footer items towards extreme left of there columns, something like shown in the screenshot attached?
Also @leecalcote, how about reorganizing them to Getting Started > Resources > Community > Socials......This way things can be grouped together based on structural similarity (only if it makes sense)
|
Thanks @snehaio you can try to keep the socials and community divs side by side as suggested by @GaganpreetKaurKalsi and also try to align them properly. |
|
Noted! @GaganpreetKaurKalsi @Pratik-050 . |
Signed-off-by: Sneha Singh <[email protected]>
|
Rearranged the columns according to their structural similarity, as provided in the screenshot by @GaganpreetKaurKalsi . Please review it once and lmk if any changes are still required. Thankyou! |
There was a problem hiding this comment.
Can we align the content as shown below? Try to use grid layout if flexbox isn't working for the requirement. @snehaio
Signed-off-by: Sneha Singh <[email protected]>
|
Thank you, @GaganpreetKaurKalsi, for suggesting the grid layout! Switching to grid made it much easier to align the columns as needed. I’ve made the changes and updated the PR. |
|
@snehaio Let's discuss this on websites call on Monday at 6:30 PM IST (7:00 AM CT). Add it as an agenda item to the meeting minutes, if you would :) |
There was a problem hiding this comment.
@snehaio there is this horizontal overflow on small screen size (look at the scrollbar at the bottom)
| responsive: [{ breakpoint: 1300, settings: { slidesToShow: 2.5 } }, /* other breakpoints */] | ||
| }); | ||
| }); | ||
| </script> |
There was a problem hiding this comment.
any reasons to remove other breakpoints ? @snehaio
Added this to agenda items: |
_includes/footer.html
Outdated
| clipboard.on('success', function (e) { /* clipboard success logic */ }); | ||
| clipboard.on('error', function (e) { /* clipboard error logic */ }); | ||
| </script> | ||
| <script> | ||
| function displayCode(id) { /* function logic */ } | ||
| </script> | ||
| <script type="text/javascript"> | ||
| let toggleBtn = document.getElementById("mode-toggle-btn"); |
There was a problem hiding this comment.
@snehaio we'd probably want to have the logic back in place here
Signed-off-by: Sneha Singh <[email protected]>
| childElements[1].style.color = 'white'; | ||
| childElements[1].style.background = "#00b39fff"; | ||
| } | ||
| } |
There was a problem hiding this comment.
Please correct the formatting and confirm if the added logic is same as previous. Thanks!
|
@snehaio we could not disucss this PR in previous websites meeting, will you be presenting it today on sites' call at 6PM IST? |
Description
This PR fixes #1827
Notes for Reviewers
Signed commits