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

Aligning and fixing overflowing elements #1483

Merged
merged 1 commit into from
Sep 20, 2023
Merged

Aligning and fixing overflowing elements #1483

merged 1 commit into from
Sep 20, 2023

Conversation

SparshKesari
Copy link
Contributor

@SparshKesari SparshKesari commented Sep 20, 2023

Thanks for contributing to the Selenium site and documentation!
A PR well described will help maintainers to review and merge it quickly

Before submitting your PR, please check our contributing guidelines.
Avoid large PRs, and help reviewers by making them as simple and short as possible.

Description

This PR addresses the overflow and alignment issues observed on the Selenium website. Certain elements were not aligned properly with the screen viewport, causing them to bleed outside of the viewport. This set a general width for the page that's wider than the viewport, leading to horizontal scrolling. The changes made in this PR ensure that all elements adjust and align properly according to the size of the screen viewport.

Fixes: #1482

Motivation and Context

Issue: Usability and accessibility of the webpage
Impact: Users had to horizontally scroll to view content, which is not ideal for usability and accessibility.

Screenshots:

image image

Types of changes

  • Change to the site (I have double-checked the Netlify deployment, and my changes look good)
  • Code example added (and I also added the example to all translated languages)
  • Improved translation
  • Added new translation (and I also added a notice to each document missing translation)

Checklist

  • I have read the contributing document.
  • I have used hugo to render the site/docs locally and I am sure it works.

@netlify
Copy link

netlify bot commented Sep 20, 2023

Deploy Preview for selenium-dev ready!

Name Link
🔨 Latest commit 06a62c1
🔍 Latest deploy log https://app.netlify.com/sites/selenium-dev/deploys/650ab8c92f0b15000890f186
😎 Deploy Preview https://deploy-preview-1483--selenium-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@diemol diemol left a comment

Choose a reason for hiding this comment

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

Thank you, @SparshKesari!

At some point we need to do similar work for mobile viewports.

@diemol diemol merged commit fa2644f into SeleniumHQ:trunk Sep 20, 2023
5 checks passed
selenium-ci added a commit that referenced this pull request Sep 20, 2023
Minor CSS changes to fix alignment issues

[deploy site] fa2644f
@SparshKesari
Copy link
Contributor Author

SparshKesari commented Sep 20, 2023

Thanks @diemol for reviewing,
Working on implementing a mobile viewport navbar and improving responsiveness of the page.

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

Successfully merging this pull request may close these issues.

[🐛 Bug]: Alignment and overflowing elements on the webpage
2 participants