Skip to content
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

Made the section Playground section responsive #6071

Merged
merged 10 commits into from
Nov 10, 2024

Conversation

NishantSinghhhhh
Copy link
Contributor

Description

This PR fixes #6069

Notes for Reviewers

This PR includes updates to make one section of the home page responsive. The changes include:

Added media queries to adjust layout and styling for smaller screen sizes.
Adjusted padding, margin, and font sizes to enhance readability and spacing on mobile devices.
Updated the CSS for images and containers in the section to ensure proper scaling and alignment on screens below 768px and 470px.

Signed commits

  • Yes, I signed my commits.

@l5io
Copy link
Contributor

l5io commented Nov 10, 2024

🚀 Preview for commit 5f76aec at: https://6730e2ba4020f1fd389b1b9f--layer5.netlify.app

Comment on lines 68 to 75

@media only screen and (max-width: 450px) {
height: 600px;
}

@media only screen and (max-width: 296px) {
height: 800px;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@media only screen and (max-width: 450px) {
height: 600px;
}
@media only screen and (max-width: 296px) {
height: 800px;
}

Copy link
Contributor Author

@NishantSinghhhhh NishantSinghhhhh Nov 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sir after 300px too, this error is coming in which the text is not visible , so for that , we need to add the media query for 296px

Screenshot 2024-11-11 001336

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

@vishalvivekm vishalvivekm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NishantSinghhhhh please consider incorporating suggested changes.

NishantSinghhhhh and others added 4 commits November 10, 2024 23:49
Co-authored-by: Vivek Vishal <[email protected]>
Signed-off-by: NISHANT SINGH <[email protected]>
Co-authored-by: Vivek Vishal <[email protected]>
Signed-off-by: NISHANT SINGH <[email protected]>
Co-authored-by: Vivek Vishal <[email protected]>
Signed-off-by: NISHANT SINGH <[email protected]>
Signed-off-by: Vivek Vishal <[email protected]>
@l5io
Copy link
Contributor

l5io commented Nov 10, 2024

🚀 Preview for commit ae9bd7a at: https://6731002ae3f3370614e4a348--layer5.netlify.app

@l5io
Copy link
Contributor

l5io commented Nov 10, 2024

🚀 Preview for commit 28306ed at: https://6731086b88db9e2f474094e1--layer5.netlify.app

@vishalvivekm vishalvivekm merged commit 822a8fc into layer5io:master Nov 10, 2024
5 checks passed
@vishalvivekm
Copy link
Member

@NishantSinghhhhh Thank you for your contribution!
Let's discuss this during the website call on Monday at 6:30 PM IST (7:00 AM CT).

Please add it as an agenda item to the meeting minutes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Responsive issue on homepage
3 participants