How to add padding for mobile

[Ivkaiv]

Hi! I'm trying to set up navbar, everything is ok, except one problem – I can't realize how to add padding for mobile and remove colliding cards with navbar. I know that I should use cardmod, but I don't know how to do that. Where should I add this:

your_theme:
card-mod-theme: your_theme
card-mod-root-yaml: |
.: |
/* Add padding to the left (or other sides, depending on your navbar position) for desktop screens */
@media (min-width: 768px) {
hui-sections-view {
padding-left: 100px !important;
}
}

  /* Add bottom padding for mobile screens to prevent cards from overlapping with the navbar */
  @media (max-width: 767px) {
    hui-sections-view:after {
      content: "";
      display: block;
      height: 80px;
      width: 100%;
      background-color: transparent; 
    }
  }
  
  Thank you so much!

[rywalters]

You need to create a theme in your configuration.yaml. IME, hui-sections-view doesn't work; I used hui-view. Here's mine, for example:

# Load frontend themes from the themes folder
frontend:
  # themes: !include_dir_merge_named themes
  themes:
    MyTheme:
      modes:
        light:
          primary-color: "#03A9F4"
        dark:
          primary-color: "#03A9F4"
          secondary-color: "#FF9800"
      card-mod-theme: MyTheme
      card-mod-root-yaml: |
        .: |
          @media (max-width: 767px) {
            hui-view:after {
            content: "";
            display: block;
            height: 60px;
            width: 100%;
            background-color: transparent; 
            }
          }

[joseluis9595]

I've seen this happen multiple times, in my case I'm using sections view for my dashboard, so the css snippet was working flawlessly. But obviously there's more types of dashboards available.
Haven't had the time to properly test with other types, but might need to update the README soon, as this is a common issue with users of navbar-card.