Merge pull request #36 from AnySoftKeyboard/flag-gap

ensure flag does not overflow into the text

Author: menny

css/screen.scss

@@ -14,13 +14,12 @@
 @import "footer";
 
 .flag-container {
-  display: inline-block;
-  width: 50px; /* Adjust as needed */
-  text-align: center;
-  margin-right: 12px;
+  margin-right: 8px;
 }
 
 .language-flag {
-  border: 1px solid black;
+  height: 32px;
+  width: auto;
   vertical-align: middle;
+  border: 1px solid black;
 }

languages.html

@@ -6,7 +6,7 @@
 <section>
 	{% for language in site.data.languages.languages %}
 	<div>
-	<p class="languages-list"><span class="flag-container"><img src="{{ language.icon }}" alt="{{ language.name }} flag" class="language-flag" style="height: 32px; width: auto; vertical-align: middle;"></span> {{ language.name }}
+	<p class="languages-list"><span class="flag-container"><img src="{{ language.icon }}" alt="{{ language.name }} flag" class="language-flag"></span> {{ language.name }}
 
 	{% if language.github == nil or language.github == "" %}
 	<img class="no-link-found not-full-icon" src="/images/github.png" width="32px" height="32px"/></a>