Hi all. I’m attempting to replicate this screen using the Custom Button Card. My hope is that I can write the card in a way that it resizes to fit any screen. I think this is possible by using percentages for values.
This is my progress so far. I added a border to try and better understand the size and placement of these elements. Here’s of things I could use help understanding:
How do I make the view fit all of the available space? You’ll notice a vertical scroll bar on the right side
How can I best control the placement of the temperature and the detailed information elements? I am unsure how to place vertically or horizontally.
Why is the date not at the exact top corner of the card? I can’t see where I have any padding or other offsets that would account for the space at the top. I am fine with it’s placement but curious why it is not aligned to the corner of the containing card
Any advice is certainly appreciated. I am just learning CSS and the positioning and sizing methods are taking a while for me to comprehend.
Half of your problem is that you’re treating detail as a separate button card. I don’t have the code exactly, but you should focus your time on learning CSS placement in a grid. Use w3schools to learn the CSS, then apply it to the text. Keep in mind, you can output HTML directly from the custom field that contains that information without the additional custom button card.
Thanks for the tips. I will check out w3 school and see what I can learn.
I have reworked things without the cards. I can see where that would simplify things but I still don’t understand how to move the detail section (highlighted yellow) over to the middle. I’ve tried justify-self start/center and no matter what it is stuck to what I guess is end. Any ideas?
I’ve taken your advice and am looking through the align options. From the list of eight available as described at CSS Box Alignment Module Level 3 W3 page, the only one that moves the detail section is the align-self option. Unfortunately, this just moves the table vertically and not horizontally. Above is an example of align-self: start . ‘center’ puts it in the middle but stuck on the right side and ‘end’ puts it at the bottom also stuck to the right. I’m a loss on how to move it horizontally with ANY option.
For completeness, this is the code with that one change made. I’m also noticing that my table align left is not being honored either.
Thanks for the tip on dev tools. Unfortunately I’m not getting the ‘Inspect’ when I right click on the web page so I’m uncertain how to pull up specifics for the elements in the dev tools view. I think this may be because the whole card is a button so the right click is not being accepted?
I decided to give your other suggestion a try and break up the grid to have more individual elements instead of the HTML table I was using. I was able to get things to line up much better once I altered my grid-template-rows and grid-template-columns. Unfortunately I’m currently only using up a small portion of the card and I’d like to use the entire card. Further, it seems when I change the font size of the temperature element on the left it increases the space between the ‘Real Feel’ and the ‘Precipitation’ and ‘Wind’ elements on the right. My belief/hope was that all of these should act independently of each other. Is that not the case?
Thanks. I got this part working now. Seems like a good tool to attempt and modify things without changing the card config.
I’m still unsure how I should be configuring the grid-template-rows/columns or how to fill the whole view. I will surely look through W3 for this type of stuff but thought that the forum would be a more focused place to find these type answers from folks who have had these ‘problems’ before me?
this is using min-content for the first row, and max-content for the first column. The rest is 1fr. Try and see if that solves some problems. Your grid areas look good
So now I am pretty much where I want to be horizontally but would like to add a lot more space between the first row and the second and add some blank space at the bottom. Basically want the space from the bottom of the first row to the bottom of the card space filled with the blue background color and have the second row centered vertically in that space. Is there a way to define that the whole card be used?
It’s the buildin “name” who takes a row in top, so currently you have to use margin-top: -x%, to move your date up
If you use name, it should not be necessary
or maybe it’s the default grid margins who cause it
Im using this in my theme, maybe thats why
Thanks for the tip and that does make sense. I’ve made some decent progress. Thanks to a Kevin Powell YT video, I was able to fill the viewport using a min-height: 100 vdh
Now my date row is stuck on the second row. Maybe it was there all along, but I’m not sure how to move it. I’d think that the start/start I’m using would have put it near the top left corner but apparently not. Can someone take a look and let me know if they can spot how I can move this up vertically without having to use a margin? Surely I should be able to do this right?
And as i mentioned ( and showed above ) … remove the date:-custom field
Place the template in name: ( as showed in pic above )
And under styles: you add
Thanks to you both. I took @boheme61 advice and changed grid-template-rows: 1fr 1fr and it did bring the date up a bit. I did not change to name as suggested. I do understand that that may ‘fix’ the current issue, but shouldn’t I still be able to move that element a different way instead?
@petro Does this show what you were requesting? I’m seeing that it appears to have inherited the justify-self start and align-self start and additionally is setting width to max-content which I guess is due to the min-content → 1fr change I mentioned above? I have a red border around the top level card. I still don’t understand why that date text is not much higher than it is. Please excuse my ignorance as I am obviously still learning and have a lot left to learn.
Have a look at this picture, describing the layout, in above link to the doc
As You have not defined any img or icon , so by placing your “info” from the area(custom area), in the name (n) it should be at the most top, then change area “date” to n or name, in your grid template area …
another example
Also, you can force the first row to be i.e 15px ( instead of 1fr ) , but having the font-size to 200% makes no sense
Sorry. Your screenshot was small and I couldn’t see enough detail. How about this? I can now see that the date indeed is where I would expect to see it within it’s grid cell. So the real issue is that my grid is not being expanded across the whole containing card right?