Hey Corey,
There is a way to do this with the state-switch card.
I do it like this in my other dashboard Neon Lovelace UI & Theme for tablets
- type: custom:state-switch
view_layout:
grid-area: kalender
entity: mediaquery
states:
'(min-width: 1100px)':
type: custom:atomic-calendar-revive
entities: calendar.ical_daniel_kalender
maxDaysToShow: 100
maxEventCount: 4
disableEventLink: true
disableLocationLink: true
showRelativeTime: false
showCurrentEventLine: false
showProgressBar: false
showWeekDay: true
showHiddenText: false
dayWrapperLineColor: transparent
dateSize: 150
fullDayEventText: Hela dagen
noEventsForTodayText: Inga händelser idag!
noEventsForNextDaysText: inga händelser kommande dagar!
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
background: transparent;
margin-top: -15px;
margin-left: -22px;
font-size: 12px; }
.hoursHTML {
font-weight: bold;
background: rgb(0,0,0,0.2);
border-radius: 5px;
padding: 5px;
}
.event-left {
text-transform: lowercase;
text-align: left !important;
}
'(min-width: 800px)':
type: custom:atomic-calendar-revive
entities: calendar.ical_daniel_kalender
maxDaysToShow: 100
maxEventCount: 4
disableEventLink: true
disableLocationLink: true
showRelativeTime: false
showCurrentEventLine: false
showProgressBar: false
showWeekDay: true
showHiddenText: false
dayWrapperLineColor: transparent
dateSize: 150
fullDayEventText: Hela dagen
noEventsForTodayText: Inga händelser idag!
noEventsForNextDaysText: inga händelser kommande dagar!
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
background: transparent;
margin-top: -82px;
margin-left: -22px;
font-size: 12px; }
.hoursHTML {
font-weight: bold;
background: rgb(0,0,0,0.2);
border-radius: 5px;
padding: 5px;
}
.event-left {
text-transform: lowercase;
text-align: left !important;
}
I guess you can also use card-mod and add
@media (max-width: 800px) { … } together with display: none but i have not tried it myself.
The extra styles field in the custom_button should also be able to to this.