fix(learning page): for mobile devices fix sidebar and learning page layout (#331)

[sahilkhan117]

Closes #331

Layout(Learning Page): Remove Sidebar for Better Usability on Mobile Screens

Changes

• Removed the sidebar on smaller screens to enhance readability and usability.
• Applied full-width content layout for better presentation on mobile devices.
• Improved navigation visibility by ensuring Previous and Next buttons are always accessible.
• Added proper padding and spacing for a clean, readable appearance.

Screenshots

Before	After

Test Devices

• Samsung Galaxy Z Fold 5
• Samsung Galaxy S20 Ultra
• Google Pixel 6 Pro
• iPhone 13 Pro Max
• OnePlus 9 Pro
• Xiaomi Mi 11 Ultra

Flags

• This solution removes the sidebar only on mobile screens while keeping it on larger screens.
• The changes were tested on multiple devices to ensure consistent appearance.

🔗 Related Issues

• Issue fix(layout): padding issues on mobile devices for Main Page, Template Preview, and Footer  #329
• Related PR: Layout: padding issues on mobile devices for Main Page, Template Preview, and Footer #328

Code Added

for sidebar

@media (max-width: 767px) {
    display: none;
}

for main learning block

@media (max-width: 767px) {
    margin-top: 25px;
    margin-bottom: 30px;
    h1 {
      margin-top: 0;
}

Author Checklist

• DCO sign-off included
• Verified on multiple devices
• Ready for merging into main from fork:sahilkhan117/i331/fix-learn-page-layout

@DianaLease can you please review my PR and Let me know if there is any changes or corrections regarding this problem.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	4613997
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67e40c936fd9aa00082f350f
😎 Deploy Preview	https://deploy-preview-332--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[shivasankaran18]

@sahilkhan117 no sidebar for mobile devices ? .. I too thought of this issue . For better User experience, why can't we have a Hamburger side bar menu .. @DianaLease would like to have your thoughts on this