Skip to content

Guide page should be responsive #349

@kcdevv

Description

@kcdevv

Issue Description:
On the Nightwatch.js website, the "Guide" page has a layout issue where the 'What is Nightwatch?' section overflows horizontally on extra-large screens (>1200px). Additionally, the 'Supported Browser' section overlaps with the right container, causing the entire page to overflow horizontally.

Steps to Reproduce:

  1. Open the Nightwatch.js website
  2. Navigate to the Guide page by clicking on "Guide" in the navigation bar.
  3. Scroll down to observe the issue in the Nightwatch and Supported Browser sections.
  4. Resize the browser window to an extra-large screen width (over 1200px) to see the problem in detail.

Observations:

  • The issue is only noticeable on screens with a width greater than 1200px.
  • The Nightwatch section's width exceeds the container, causing horizontal scrolling.
  • The Supported Browser section's content overlaps with the right-side container, leading to layout misalignment.

Suggested Fix:

  1. Adjust Column Widths in the page-content Section:
    Ensure the columns in the page-content section are properly divided to avoid exceeding the container width.

  2. Test Layout Responsiveness:
    Verify the alignment of sections across all screen sizes, with special attention to extra-large screens (>1200px).

Additional Information:

  • The problem may stem from incorrect grid usage or uncontained elements within the Nightwatch and Supported Browser sections.

Screenshot:
prev

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions