Mobile Responsive Housing Market Widget Built with HTML, CSS & Bootstrap for Sitefinity

Metrics	March 2025	March 2024	Change from Last Year	February 2025	Change from Last Month
Sales Volume	$30,815,064	$28,914,167	+6.6%	$23,094,475	+33.4%
Units Sold	114	124	-8.1%	95	+20.0%
Median Sales Price	$238,950	$215,000	+11.1%	$220,000	+8.6%
New Listings	135	118	+14.4%	142	-4.9%
Active Listings	219	168	+30.4%	212	+3.3%

The Challenge

A real estate association needed a way to display monthly housing market data that was both mobile-friendly and easy to update via their Sitefinity CMS. The table needed to show:

Sales volume
Units sold
Median sales price
New listings
Active listings

They also wanted to highlight changes from the previous year and previous month, and keep the design accessible, color-coded, and branded.

Before mobile responsiveness fix - housing market table — Before: The table appeared squished and hard to read on mobile devices.

The Solution

I built a responsive, three-column layout using HTML, CSS, and Bootstrap 4, and integrated it into a Sitefinity content widget so the client could manage updates without needing developer involvement.

Used Bootstrap’s responsive grid system for mobile compatibility
Styled headers with brand colors (orange for March 2025, blue for March 2024, etc.)
Applied semantic HTML and accessibility features like scope="col" for screen readers
Color-coded performance changes for quick visual cues
Structured the layout as a CMS-friendly widget

Mobile Responsiveness Update

To further enhance usability on small screens, I added custom CSS to collapse the table into a stacked layout on mobile devices. This includes hiding headers, labeling each cell with data-label attributes, and styling each row like a mobile-friendly card for clarity and accessibility.

The Result

The result is a clean, responsive housing market snapshot widget, seamlessly embedded in Sitefinity CMS. It performs well across devices and is easy for content editors to update as new market data becomes available.

This project challenged me to balance design, responsiveness, accessibility, and CMS integration — and it’s the kind of frontend development I truly enjoy.

After mobile responsiveness fix - stacked housing market table on mobile — After: The table now stacks cleanly and is easy to scroll on mobile screens.

Key Takeaways

Reusable and editor-friendly widget design improves long-term maintainability
Responsive, mobile-first layouts enhance user experience
Custom code can integrate cleanly within a CMS like Sitefinity

Explore the Code

You can view the code on CodePen.

If you’re working on a similar project and need help building a custom widget or responsive frontend layout, let’s connect.