🔹 Card-mod - Super-charge your themes!

Share your Projects! Themes
1997

great, please report back.

For now I’ve solved my personal device settings like this:

              @media (max-width: 800px) {
                .badges {
                    overflow-x: scroll !important;
                    scrollbar-width: none;
                    flex-wrap: nowrap !important;
                    justify-content: space-evenly !important;
                    max-width: 500px;
                }
              @media (max-width: 390px) {
                .badges {
                    overflow-x: scroll !important;
                    scrollbar-width: none;
                    flex-wrap: nowrap !important;
                    justify-content: space-evenly !important;
                    max-width: 380px;
                }

it works.
Probably need to add more @media settings of using different devices…

update/edit

using the relative viewport max-width: 96vw makes device independent :slight_smile:

    :first-child $:
        hui-view-header:
          $:
            hui-view-badges $: |
              /* mobile-specific styles */
              @media (max-width: 575px) {
                .badges {
                  overflow-x: scroll !important;
                  scrollbar-width: none;
                  flex-wrap: nowrap !important;
                  justify-content: space-evenly !important;
                  max-width: 96vw;
                }
                .badges > * {
                    min-width: fit-content;
                }

and resize to any mobile device/narrow desktop size.

Only grip I have is the max_columns: 1 is not respected, which look s especially silly in Safar on the Mac as that has even wider vertical gaps in the view sides than Chrome

1 Like