diff --git a/apps/table.css b/apps/table.css index d11cd8d75..cbe043650 100644 --- a/apps/table.css +++ b/apps/table.css @@ -243,7 +243,7 @@ nav li:not(.active):hover { td { text-align: center; /* or left, right, justify, etc. */ -======= +} .d-md-inline-flex{ display: flex; @@ -259,5 +259,34 @@ td { line-height: 1; font-size: 24px; -} +}/* Mobile View: Adjust layout for screens <= 500px */ +@media (max-width: 500px) { + .d-md-inline-flex { + display: flex; /* Flexbox for layout */ + flex-wrap: wrap; /* Allow wrapping */ + justify-content: auto; /* Center align all buttons */ + gap: 10px; /* Add spacing between buttons */ + } + .d-md-inline-flex > div { + flex: 1 1 calc(50% - 10px); /* Each child takes 50% of the row width minus spacing */ + margin: 5px; /* Add spacing around items */ + text-align: center; /* Center content within each item */ + } + + .btn-group { + display: flex; /* Ensure buttons in groups stay together */ + flex-wrap: nowrap; /* Prevent wrapping within the group */ + justify-content: center; /* Center align dropdown buttons */ + + } + + .btn-group .btn { + flex: 1; /* Ensure equal width for buttons within the group */ + } + + .btn { + width: 100%; /* Buttons take full width of their container */ + text-align: center; /* Center-align text within buttons */ + } +} diff --git a/apps/table.html b/apps/table.html index ae8075125..c2da1b157 100644 --- a/apps/table.html +++ b/apps/table.html @@ -139,7 +139,7 @@