🚨 Bug Report / UI Enhancement – Resume Style Fix Needed on Download

[codeaashu]

🚨 Bug Report / UI Enhancement – Resume Style Fix Needed on Download

Level: Level 2
Type: UI Fix / Styling
Priority: Medium
Status: Open for Contribution

---

📝 Description

When downloading the resume from the (https://www.devdisplay.org/ResumeBuilder), the formatting appears misaligned. Horizontal lines (<hr>) and section spacing are not rendering properly. You can refer to the attached screenshot for the issue preview.

🔍 Issue Preview:

• The horizontal line under "Skills" and "Experience" and also other sections is not aligned correctly.
• Inconsistent spacing and alignment of content.
• Section labels (e.g., Languages, Frameworks) feel visually disconnected from the details.

📸 Screenshot Attached:
(Refer to screenshot in this issue or see this)

---

✅ Expected Behavior

• Proper alignment of <hr> elements to match section width.
• Clean and uniform spacing across all sections.
• Visually consistent and professional appearance in the downloaded PDF.

---

🔧 Suggested Fixes

• Review CSS styles applied during resume PDF export (likely using @media print or the export component).
• Fix margin/padding inconsistencies in .section and .section-title classes.
• Ensure cross-browser compatibility for print formatting.

---

💡 Tech Stack Reference

• Likely used: React, Tailwind CSS, jspdf or html2pdf
• File to look into: ResumePreview.jsx or the relevant download/export logic

---

📬 Want to contribute?

Comment below to get assigned!
If you're picking this up, make sure to follow the contribution guidelines in the repository.

💡 Before diving in, make sure to:
✅ Add your profile to DevDisplay.
⭐ Star the repository to show your support and stay updated with new features!

🚨 This is the first & mandatory step in becoming a contributor.

---

For More Details and Help

• Join DevDisplay Discord Community: Discord Community

  • Connect with other developers and collaborate on exciting projects.

• Reach Out to the Team:

  • Company Email: team@devdisplay.org
  • Creator's Email: hellow.ashutosh@gmail.com

• Connect on Social Media:

  • GitHub Organization: https://github.com/devdisplay
  • LinkedIn: https://www.linkedin.com/company/devdisplay/
  • Twitter: https://x.com/devdisplay_
  • Instagram: https://www.instagram.com/devdisplay/

---

Thanks and Best Regards

The DevDisplay Team 💌

Add screenshots

Add screenshots

What browsers are you seeing the problem on?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Sohanprabhas]

i want to work on the issue

[github-actions]

Hi there! This issue is still open. We are looking forward to your response.
Assignees: None

[Rupali2507]

Hi! I’d like to work on this Resume style fix as part of GSSoC'25. Please assign it to me. 😊

[suryansh924]

Hey!
I would like to work on this issue, it requires small margin fixes in the pdfGenerator.js file!

[github-actions]

Hi there! This issue is still open. We are looking forward to your response.
Assignees: @Rupali2507, @Sohanprabhas