Layout: padding issues on mobile devices for Main Page, Template Preview, and Footer

[sahilkhan117]

Bug Report 🐛

Layout issues on mobile devices for Main Page, Template Preview, and Footer

Current Behavior

On certain mobile devices, the following layout issues are observed:

• Main Page:
  • Excessive padding causes the content to appear smaller and partially hidden.
  • Sections have unnecessary whitespace, reducing the available viewable area.
• Template Preview:
  • Preview content appears constrained due to large padding, limiting the preview area.
• Footer:
  • Footer links and sections have excessive padding, making the content stack unevenly.
  • Important footer details require unnecessary scrolling.

Mobile Devices Affected

The issue is noticeable on devices with smaller screens and large aspect ratios, such as:

• Samsung Galaxy Z Fold 5 (2176 x 1812, 21.6:18 aspect ratio – inner display)
• Samsung Galaxy S20 Ultra (3200 x 1440, 20:9 aspect ratio)
• Samsung Galaxy F13 (2408 x 1080, 20:9 aspect ratio)
• Google Pixel 6 Pro (3120 x 1440, 19.5:9 aspect ratio)
• OnePlus 9 Pro (3216 x 1440, 20.1:9 aspect ratio)
• Xiaomi Mi 11 Ultra (3200 x 1440, 20:9 aspect ratio)

Screenshots

Template Preview	Footer and Extra Space

Expected Behavior

• The Main Page, Template Preview, and Footer should be fully responsive and properly aligned on all screen sizes, including mobile devices.
• Content should fit within the viewport without unnecessary scrolling or hidden sections.

Possible Solution

• Reduce padding for better use of screen space on smaller devices.
• Apply conditional screens from useBreakpoint to decrease padding on mobile screens.
• Ensure the reduced padding does not disturb the layout on larger screens.
• Optimize footer spacing to prevent unnecessary stacking or hidden links.

Steps to Reproduce

1. Open the website on a mobile device with a large aspect ratio or smaller screen.
2. Navigate to the Main Page and observe the excessive padding.
3. Open a Template Preview and note the constrained preview area.
4. Scroll to the Footer and observe unnecessary whitespace and stacked sections.

Detailed Description

The layout on mobile devices needs less padding to make better use of the available screen space. By reducing padding in the Main Page, Template Preview, and Footer, the content will fit more comfortably within the viewport, enhancing readability and usability.

Related

• Issue Navbar's Logo and Text disturbed on some mobile devices with large aspect ratios #324
• PR fix(Navbar): Update alignment for mobile devices with large aspect ratios (#324) #325

Necessary Flag

• Verify that the reduced padding does not affect the layout on larger screens.
• Test the changes on real devices or simulators to confirm consistent appearance.