Fix missing CSS rules for language flags (Korean, Hebrew, Romanian, Russian, Swedish)
Problem
Several language flags were not displaying on the webpage despite having flag assets available in the assets/icons/flags/ directory. The issue was reported specifically for the Korean flag, but investigation revealed that Hebrew, Romanian, Russian, and Swedish flags were also affected.
Root Cause
The flag image files existed in the repository, but the corresponding CSS rules in assets/css/style.css were missing. The CSS file defines two types of rules for each language:
-
.dropdown .XX-YY a- for 16px flags in the dropdown menu -
#XX-YY- for 24px flags in the language switcher button
Without these CSS rules, the flags couldn't be displayed even though the image files were present.
Solution
Added CSS rules for 5 languages that had flag files but were missing CSS definitions:
-
Korean (ko-KR) →
kr16.png/kr24.png -
Hebrew (he-IL) →
he-IL16.png/he-IL24.png -
Romanian (ro-RO) →
ro16.png/ro24.png -
Russian (ru-RU) →
ru16.png/ru24.png -
Swedish (sv-SE) →
sv16.png/sv24.png
Changes Made
-
Single file modified:
assets/css/style.css - 10 new CSS rules added (5 languages × 2 sizes each)
- No other files modified
- No breaking changes to existing functionality
Testing
✅ Site builds successfully with Jekyll
✅ All CSS formatting checks pass (editorconfig)
✅ JSON validation passes
✅ Flags display correctly in both language switcher and dropdown menu
✅ Manually verified on Korean and Russian language pages
Screenshots
Korean language page showing flag in navigation bar:
Language dropdown showing all flags (including newly fixed ones):
Russian language page showing flag in navigation bar:
All five previously missing flags now display correctly alongside the existing language flags.
Fixes #[issue_number]
Original prompt
This section details on the original issue you should resolve
<issue_title>Some flags are not showing</issue_title> <issue_description>For example, the korean flag is available in the assets folder, but it does not show up in the webpage</issue_description>
Comments on the Issue (you are @copilot in this section)
Fixes daviddavo/jgmd#186
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.
Quality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code