ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.39k stars 51.04k forks source link

Grid Layout Not Responsive on Mobile Devices #52631

Closed Mmabiaa closed 1 week ago

Mmabiaa commented 1 week ago

Description: It appears that the grid layout implemented using Ant Design does not adjust correctly to mobile device screens. The layout does not match the expected responsive behavior, leading to a poor user experience on smaller devices.

Steps to Reproduce:

  1. Open the application on a mobile device or emulator.
  2. Observe the grid layout and its responsiveness.
  3. Note that columns do not stack or resize as intended for smaller screen sizes.

Expected Behavior: The grid should adapt based on the screen size using Ant Design’s responsive grid system, which includes: • Row and Col Components: Ensure that Row and Col components are utilized correctly with appropriate breakpoint props (e.g., xs, sm, md, etc.) to facilitate responsive design. • Gutter Spacing: Verify that gutter spacing is applied consistently to maintain visual hierarchy across devices. • Viewport Meta Tag: Confirm that the viewport meta tag is included in the HTML <head> section to ensure proper scaling on mobile browsers.

Current Implementation Example:


import { Row, Col } from 'antd';

const AppLayout = () => (
  <Row gutter={[16, 16]}>
    <Col xs={24} md={12}>
      <div className="content">Section A</div>
    </Col>
    <Col xs={24} md={12}>
      <div className="content">Section B</div>
    </Col>
  </Row>
);

Additional Notes: • Testing on various devices reveals that the layout remains fixed and does not adjust as expected for screens smaller than 768px. • Consider reviewing the implementation against Ant Design’s documentation on responsive layouts to ensure compliance with best practices.

github-actions[bot] commented 1 week ago

Hello @Mmabiaa, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

你好 @Mmabiaa,为了能够进行高效沟通,我们对 issue 有一定的格式要求,你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合!