is there a way using css to left align the Title? I’ve tried a couple of things but have no success. I can get the footer to left align but not the title. I want to create a IOS inspired theme.
I’m sure someone can make cleaner… but just fooling around i got this… maybe u can modify… I think would need some more work on the styles if you want to change the colors for off and on. .but this worked for the alignment. I asked chatgpt and it gave some parameters (which didn’t quite do what I asked) and then I just modified the percentages.
.tile .title { position: absolute; top: 50%; left: 25%; transform: translateY(-50%); /* Adjust for exact vertical centering */
text-align: left;
font-size: 2.5em;}
.tile .icon {
display: flex; align-items: center; position: absolute;
top: 50%; left: 5%; transform: translateY(-50%);
}
.tile .icon svg {
width: 60%;
height: 60%;
color: orange;}
1 Like
Joseph, you might have inspired me a little bit… Hope you post what you get… but here’s what I started with (struggling w/ the oval background to icons still)
tile .title { position: absolute; top: 45%; left: 25%; transform: translateY(-65%); /* Adjust for exact vertical centering */
text-align: left;
font-size: 2.5em;}
.tile .tile-footer {
font-size:1.5em;
position: absolute; top: 55%; left: -1%; transform: translate(-50%, -50%);}
.tile .icon svg {
width: 70%;
height: 70%;
color: orange;}
.tile .icon {
display: flex; align-items: center; position: absolute;
top: 50%; left: 5%; transform: translateY(-50%);
background-color: rgba(128, 128, 128, 0.4); /* Semi-transparent grey */
border-radius: 60%; /
padding: 3px; /
.tile .tile-footer { position: absolute; top:-15%; left:-50%; transform:translateY(-5%);
font-size: 1.5em;}
I’ll give it a shot tonight, here is what i got so far, i have the labels center, they look ok, i’d just prefer them to be left aligned. Thanks!
1 Like
