language width is fixed for small devices

creativecommons · Mar 5, 2024 · 8bdb109 · 8bdb109
1 parent ce57f2b
commit 8bdb109
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/cc_legal_tools/static/cc-legal-tools/base.css b/cc_legal_tools/static/cc-legal-tools/base.css
@@ -7,7 +7,25 @@
 .bidi-right main ul, .bidi-right main ol {
   margin: 0 2em 2em 0;
 }
-
+/*for device having width <=400px*/
+@media (max-width: 400px) {
+  .language-span {
+      width: 80px;
+  }
+  .language-span-select {
+      width: 60px;
+  }
+}
+/* For Samsung Galaxy Fold */
+@media (max-width: 280px) {
+  .language-span {
+      width: 55px;
+
+  }
+  .language-span-select {
+      width: 50px;
+  }
+}
 
 /* Ancilliary menu */
 .bidi-left div.masthead > nav.ancilliary-menu {

diff --git a/templates/includes/languages_dropdown.html b/templates/includes/languages_dropdown.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 <li>
-  <span class="locale icon-attach fa-globe">
-  <select id="languages-dropdown">
+  <span class="locale icon-attach fa-globe language-span" >
+  <select id="languages-dropdown" class="language-span-select">
     {% block lang-options %}
     <option disabled>{% trans "Languages available" %}</option>