Styling[Responsiveness]: Made the site responsive for smaller devices. #373
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe recent updates to the website's components involve stylistic refinements across various JSX files and a CSS adjustment. These changes primarily focus on visual presentation, such as modifying text sizes, alignment, and class names, as well as enhancing layout properties for better screen fit and element spacing. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ? TipsChat with CodeRabbit Bot (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Yeah! You did it 🎉 Now, Relax 😉, Grab a drink ☕, and wait for the maintainers to check your contributions. Meanwhile, you can discuss on other issues and solve them 😀. Thank You 😃!
Meanwhile you can also discuss about the project in our Discord Server 😀
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files selected for processing (4)
- Website/app/Contribute.js (3 hunks)
- Website/app/Features.js (1 hunks)
- Website/app/MainSection.js (1 hunks)
- Website/app/globals.css (1 hunks)
Additional comments: 8
Website/app/Contribute.js (5)
19-19: The heading size adjustments and class name changes in the JSX elements seem to align with the goal of improving responsiveness. Ensure that these changes are consistent with the design system and breakpoints used throughout the project.
22-22: Verify that the new class names added to the
Linkcomponent do not affect its functionality and are consistent with the project's styling conventions.31-31: The new layout for the contributors' section with flexbox and grid should be tested across different screen sizes to ensure it remains responsive and visually appealing.
47-49: Check that the new links with dynamic content (stars and forks count) are accessible and that the content is being fetched and displayed correctly. Also, ensure that the icons used are properly referenced and displayed.
34-34: Confirm that the calculation of
totalNoOfContributors - 6is intentional and accurately reflects the desired information to be displayed to the user.Website/app/Features.js (1)
- 54-56: The changes to the class names in the JSX element are consistent with the PR's objective to improve responsiveness on smaller devices. Ensure that the visual changes are tested across different devices and screen sizes to confirm that they meet the design and usability standards.
Website/app/MainSection.js (1)
- 6-6: The addition of the
h-screenclass will make theMainSectiontake up the full height of the screen on all devices. Ensure this change aligns with the design requirements and does not cause unintended layout issues, especially when content does not fill the entire screen height.Website/app/globals.css (1)
- 26-31: The changes to the
.img-layerclass with the addition ofwidth,margin, andjustify-contentproperties are appropriate for centering elements and should contribute to the responsiveness of the site on smaller devices. Ensure that these changes do not adversely affect the layout on larger screens or in different contexts where the.img-layerclass is used.
There was a problem hiding this comment.
-
@the-shivam-gupta Please consider reducing the extra spaces in some of the cards (Not all - please check once) 👇
-
Please add a statement to not display the animation for small devices.
-
Please add equal gaps in the left side of the contribute button as present in the right side of the forks button.
|
okay. "Please add a statement to not display the animation for small devices." So what do you want there to display? |
|
For small devices like mobiles, animation is not mandatory. So, keeping the responsiveness and performance of the website in mind, it would be better to not display the animation. @the-shivam-gupta What do you think? Please share any other alternatives if you think can work 😁. |
|
Ya it would be a nice idea.@SaptarshiSarkar12 |
|
Okay @the-shivam-gupta 👍 |
|
Hey @SaptarshiSarkar12, the files are of the same width and height based on the content. Can you plz provide for which screen or browser the problem is occurring:
Do u want something like this:
|
There was a problem hiding this comment.
@the-shivam-gupta Please make the following changes 👇
-
Fix the large redundant blue part in the homepage of the website
There is a huge extension of the blue background in the homepage of the website.Before Your changes were made
After Your changes were made
-
The small animation can be seen in Galaxy Fold device. You should ensure that such animation shouldn't be displayed for devices like that.
-
Please add some space to the left of the Contribute button as present in the right of the Fork button for Galaxy Fold like devices only.
- There are some blank spaces in the top and bottom of some feature cards as you can see below for Galaxy Fold like devices.
- There are some blank spaces in the top and bottom of some feature cards as you can see below for Galaxy Fold like devices.
|
Hey should I create a new pull request bcoz all the things are messed up here. |
|
@the-shivam-gupta Yes, you can. Please keep in mind that you should first update your local git repo and then, work on the task. You must close this PR then 😁. |
Fixes issue
Fixes #350
Check List (Check all the applicable boxes)
Screenshots
Note to reviewers
Summary by CodeRabbit
Contributecomponent for improved readability and visual appeal.Featurescomponent for a more polished look.MainSectioncomponent to fill the screen height for a more immersive experience.