esponsive Audit & Figma Alignment for WahooArt / ArtsDot Frontend
Budget: $30 – $250 USD
We already have a Bootstrap-based front-end implemented across WahooArt.com and dev.AllPaintingsStore.com, but several visual details diverge from the latest Figma layout.
Your task is to audit and correct the HTML/CSS to achieve pixel-perfect responsiveness across the four Bootstrap breakpoints (xs, sm, md, lg).
You will work directly in our browser-based editor connected to the development server.
A single command is provided to restart the server and apply changes immediately.
The project is considered complete only when all pages (WahooArt and AllPaintingsStore) display perfectly across all four device sizes.
________________________________________
Work Scope
1. Responsive Design Review
• Audit and correct responsiveness issues for:
o Headers, footers, menus, and forms
o Images, icons, and hero banners
o Article, artist, and museum pages
• Ensure consistent typography, color palette, spacing, and layout hierarchy.
2. Figma Alignment
• Implement pixel-perfect adjustments based on Figma references:
o Header & Footer Design (Figma)
• Match updated margins, colors, fonts, hover effects, and image alignments.
3. ArtsDot Integration
• Update the following shared templates only:
o templates/homepage_artsdot.html
o templates/includes/base_artsdot_*.html
o static/css/artsdot-V1.0.css (final overrides)
• Reduce margins (2em vs 160px) for all ArtsDot layouts.
• Apply consistent hover effects and image treatments.
4. Global Consistency Check
• Validate all navigation links and footer links.
• Unify grid layouts for lists (art, artists, articles, museums).
• Correct typography, color codes, and spacing discrepancies.
________________________________________
Deliverables
1. Updated, well-commented HTML5/CSS3 code (no inline styles).
2. Pixel-perfect match with Figma layout on all devices.
3. Verified alignment across both domains:
o https://WahooArt.com
o https://dev.AllPaintingsStore.com
4. Brief change log summarizing modified files and key fixes.
________________________________________
Tools & Access
• You will have direct access to our development server via an in-browser editor.
• One-click server restart command applies your updates immediately.
• Work will be validated in Chrome, Firefox, and Safari (latest versions).
________________________________________
Timeline & Workload
• Estimated Duration: 4 full working days
• Workload: Full-time focus required
• Delivery Deadline: All pages must pass responsive verification within 4 days.
________________________________________
Candidate Requirements
• Strong experience with Bootstrap 5, CSS media queries, and Figma-to-code translation.
• Keen eye for layout balance, color, and typography.
• Proficient in responsive debugging using Chrome DevTools.
• Reliable and detail-oriented—must test on all breakpoints before delivery.
________________________________________
Selection Criteria
We will assign the project only to freelancers who demonstrate confidence and precision in Bootstrap responsiveness.
Please confirm your experience with pixel-perfect Figma replication and responsive QA across four device sizes when applying.
Your task is to audit and correct the HTML/CSS to achieve pixel-perfect responsiveness across the four Bootstrap breakpoints (xs, sm, md, lg).
You will work directly in our browser-based editor connected to the development server.
A single command is provided to restart the server and apply changes immediately.
The project is considered complete only when all pages (WahooArt and AllPaintingsStore) display perfectly across all four device sizes.
________________________________________
Work Scope
1. Responsive Design Review
• Audit and correct responsiveness issues for:
o Headers, footers, menus, and forms
o Images, icons, and hero banners
o Article, artist, and museum pages
• Ensure consistent typography, color palette, spacing, and layout hierarchy.
2. Figma Alignment
• Implement pixel-perfect adjustments based on Figma references:
o Header & Footer Design (Figma)
• Match updated margins, colors, fonts, hover effects, and image alignments.
3. ArtsDot Integration
• Update the following shared templates only:
o templates/homepage_artsdot.html
o templates/includes/base_artsdot_*.html
o static/css/artsdot-V1.0.css (final overrides)
• Reduce margins (2em vs 160px) for all ArtsDot layouts.
• Apply consistent hover effects and image treatments.
4. Global Consistency Check
• Validate all navigation links and footer links.
• Unify grid layouts for lists (art, artists, articles, museums).
• Correct typography, color codes, and spacing discrepancies.
________________________________________
Deliverables
1. Updated, well-commented HTML5/CSS3 code (no inline styles).
2. Pixel-perfect match with Figma layout on all devices.
3. Verified alignment across both domains:
o https://WahooArt.com
o https://dev.AllPaintingsStore.com
4. Brief change log summarizing modified files and key fixes.
________________________________________
Tools & Access
• You will have direct access to our development server via an in-browser editor.
• One-click server restart command applies your updates immediately.
• Work will be validated in Chrome, Firefox, and Safari (latest versions).
________________________________________
Timeline & Workload
• Estimated Duration: 4 full working days
• Workload: Full-time focus required
• Delivery Deadline: All pages must pass responsive verification within 4 days.
________________________________________
Candidate Requirements
• Strong experience with Bootstrap 5, CSS media queries, and Figma-to-code translation.
• Keen eye for layout balance, color, and typography.
• Proficient in responsive debugging using Chrome DevTools.
• Reliable and detail-oriented—must test on all breakpoints before delivery.
________________________________________
Selection Criteria
We will assign the project only to freelancers who demonstrate confidence and precision in Bootstrap responsiveness.
Please confirm your experience with pixel-perfect Figma replication and responsive QA across four device sizes when applying.