Hi Guys, I am building and very pretty Nav Bar, with some CSS applied, and wanted some upgrades/help with CSS.
On Mobile the grid seems to be so much together, I tried to apply some padding but no succes 
With grid 5 columns works fine but I wanted all navs in a row with some more columns
The Code I am using, if someone can impprove it I would be grateful, im not a CSS pro!
I am using the entity of the browser-mod to identify if the device screen is the same as the button navigation, if true than apply the border.
type: custom:mushroom-template-card
picture: /local/imgs/[[icon]]
tap_action:
action: navigate
navigation_path: /geral-v2/[[page]]
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
{% if is_state('sensor.mobile_rn10pro_browser_path','/geral-v2/[[page]]') %}
position: relative;
border-bottom-color: yellow;
border-bottom-style: solid;
border-bottom-width: 5px;
background-color: '#3B4C6B';
width: 70px;
transition-duration: 0.4s;
overflow: hidden;
cursor: pointer;
{% else %}
position: relative;
background-color: '#3B4C6B';
border: none;
width: 70px;
transition-duration: 0.4s;
overflow: hidden;
cursor: pointer;
{% endif %}
}
ha-card:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
ha-card:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}