CSS general style...at media necessary?

[car2t]

Hi all

SPOILER ALERT!!
I am going to write some code with a possible solution for the general layout and the card. Just trying to hook others in the discussion before trying to code. I think also I will let you do it.
This is just an idea. The project is too messy for me I get lose easily. xD

I think we don't need @media for desktop.

We could do something like this:

1. set a min-height: 50vh, for example, in <div id="main-card" style="min-height: 50vh;"> ... </div>

2. And in that div a Grid:

min-height: 50vh;
display: grid;
grid-template-rows: auto 1fr auto 1px;
justify-items: center;

Last row will set the bottom in the last line using margin-top: -10%;. Well, the values can change, of course because we didn't set other CSS.

3. I think we should use clamp() CSS function for the heading and the paragraph.
4. Set a fix max-width: 40ch;, for example, for the paragraph.
5. Same padding for h1 and p.
6. Body: padding: 0 2rem; we should work in mobile perfectly, without not much code or @media.

For the general layout flex or grid with gap between items it should be enough I think.

What do you think all?
Better solutions or ideas?, I have just tested.

P.S. Sorry if all this looks "my solution", still lot to do anyway, just wanted to push a bit everyone and make others think about it without mess up the code yet. ;D

[caesiumtea]

Thank you @car2t for "your solution" :D

I like the idea that the size of the card can be calculated based on the size of its content, instead of directly setting width and height on the card element. p {max-width: 40ch} is a great idea. I think we just put some padding on the card (24px is what I measured to be the padding between the edge of card and the start of the divider line... for the mobile sample I think?) and let the content determine the width. As for the height, we need to leave room for it to vary depending on how long the random quote is. Maybe we set a min-height instead of height? But I think the height can probably also be calculated based on content.

I think we should use clamp() CSS function for the heading and the paragraph.

For which property?

[car2t]

Thank you Vance, and sorry, lol.

We could use clamp() for font sizes, that it is what I meant.
The idea of height is for keep some regular size in the card, and the max-width is only for the sentences wrap in the card, keeping a fix, or nearly, size in the card.

It was an idea, since not all the code there. We could implement other solutions for the dice.

[WitchDevelops]

I suppose we can use clamp() for text sizes: font size for p is 2px bigger on desktop than on mobile. The only drawback of using clamp() is the need to specify the right function (not easy, unless there is some calculator that helps with that).

Overall, I disagree that the content should decide the width of the card. Some advice is very short, some are longer. For me it doesn't look good when the size of the card changes with each click on the button.
Figma file doesn't specify tablet design, so I'd rather set width and max-width and eyeball the breakpoint. But that's how I would do it :)

[car2t]

Yep, it was for wrapping the advice sentences.
We can give the card "fix" sizes like min and max ones, for example.