Responsive websites frequently experience distorted layouts at specific screen sizes, called Responsive Layout Failures (RLFs). Manually repairing these RLFs involves tedious trial-and-error adjustments of HTML elements and CSS properties. In this study, an automated repair approach, leveraging LLM combined with domain-specific knowledge is proposed. The approach is named ReDeFix, a Retrieval-Augmented Generation (RAG)-based solution that utilizes Stack Overflow (SO) discussions to guide LLM on CSS repairs. By augmenting relevant SO knowledge with RLF-specific contexts, ReDeFix creates a prompt that is sent to the LLM to generate CSS patches. Evaluation demonstrates that our approach achieves an 88\% accuracy in repairing RLFs. Furthermore, a study from software engineers reveals that generated repairs produce visually correct layouts while maintaining aesthetics.
@article{arxiv.2511.00678,
title = {Repairing Responsive Layout Failures Using Retrieval Augmented Generation},
author = {Tasmia Zerin and Moumita Asad and B. M. Mainul Hossain and Kazi Sakib},
journal= {arXiv preprint arXiv:2511.00678},
year = {2025}
}
Comments
Accepted at the 41st IEEE International Conference on Software Maintenance and Evolution 2025 (ICSME'25)