### Fix: Improve Layout: Updated Box Padding and Heading Margins

[Preetiaarya]

What was done:

• Spacing Adjustments: Applied pad={{ horizontal: "large" }} to enhance horizontal spacing inside key UI components (boxes).
• Heading Adjustment: Updated <Heading> to use margin={{ top: "none", bottom: "medium" }} for improved vertical spacing and better visual alignment.

Why these changes were needed:

• The original layout had spacing issues on mobile, making the UI feel cluttered.
• The heading was misaligned and caused layout issues on smaller screens. These changes improve readability and responsiveness.

Screenshots:

[netlify]

✅ Deploy Preview for tattle-website-preview ready!

Name	Link
🔨 Latest commit	bb65b7c
🔍 Latest deploy log	https://app.netlify.com/projects/tattle-website-preview/deploys/682af7ab66ccd6000880c278
😎 Deploy Preview	https://deploy-preview-277--tattle-website-preview.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 project configuration.

[Preetiaarya]

Hello @maanasb01 Sir, could you please review the changes I made to the mobile layout spacing, heading margin adjustments, and provide feedback?

[maanasb01]

Hey @Preetiaarya, I've reviewed the changes, and they look great! Could you also check the other project pages on your mobile device or in mobile view in the browser for any inconsistencies or layout shifts? The specific issue to address is #272, which covers all product pages. If all pages are free of issues, please confirm that in this PR.

Additionally, I have a few suggestions:

1. When submitting a PR, please include a comment mentioning the issue it addresses. You can do this by typing "#" followed by the issue number, and GitHub will prompt you with suggestions, or you can paste the link directly.

2. I noticed in your PRs that you make changes first and then merge the main branch into your feature branch. While this isn't a major issue, it can lead to merge conflicts and add an extra merge commit to the history. A better practice is to first sync your local main branch with the latest changes, and then create your feature branch from that updated main. This keeps the commit history cleaner and helps avoid potential conflicts down the line.

[Preetiaarya]

Okay @*maanasb01* Sir

…

On Sun, 11 May 2025 at 14:11, Maanas ***@***.***> wrote: *maanasb01* left a comment (tattle-made/website#277) <#277 (comment)> Hey @Preetiaarya <https://github.com/Preetiaarya>, I've reviewed the changes, and they look great! Could you also check the other project pages on your mobile device or in mobile view in the browser for any inconsistencies or layout shifts? The specific issue to address is #272 <#272>, which covers all product pages. If all pages are free of issues, please confirm that in this PR. Additionally, I have a few suggestions: 1. When submitting a PR, please include a comment mentioning the issue it addresses. You can do this by typing "#" followed by the issue number, and GitHub will prompt you with suggestions, or you can paste the link directly. 2. I noticed in your PRs that you make changes first and then merge the main branch into your feature branch. While this isn't a major issue, it can lead to merge conflicts and add an extra merge commit to the history. A better practice is to first sync your local main branch with the latest changes, and then create your feature branch from that updated main. This keeps the commit history cleaner and helps avoid potential conflicts down the line. — Reply to this email directly, view it on GitHub <#277 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BJXCNCLDUONWSBHN5SDIRUL254EKBAVCNFSM6AAAAAB4YMSRHSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQNRZGYZTGNBYGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Preetiaarya]

Hello @maanasb01 Sir, can you take another look? I handled the YouTube video overflow on the product page and added overflow: hidden in ogbv.jsx. It’s now responsive on small screens.

[maanasb01]

Hey @Preetiaarya, the changes are looking good! Can you also fix the layout shift issue in mobile view for the "https://tattle.co.in/products/" route?

[Preetiaarya]

Hello @maanasb01 Sir, I previously fixed the layout and made changes, but it seems to have broken again. I've re-fixed it now.

[maanasb01]

@Preetiaarya There seem to be no new changes in your latest commit. Can you fix this https://tattle.co.in/products/ route for the mobile view?