stone ermine
Hi guys, I was finishing up the Hometown Page when I noticed that the text in the activities section doesn't display like I wanted it to. There's some whitespace to the left and the right of the text.
Here's my scrim: https://scrimba.com/s0juhm8n1m/head
quartz summit
How do you want it to display? Do you mean you want text-align: start; instead of text-align: center; ?
If you mean the runt “field” and “weights” being alone on its line (similar concept to ‘widow’ and ‘orphan’ in typography) you can try text-wrap: pretty; but it’s not baseline supported yet. For headings (and shorter lines of text), text-wrap: balance;
karmic moss
Yeah it depends how you want the text to display. Perhaps you want margin: 12px; instead of padding: 12px; for your padding-for-each-activity-util?
stone ermine
Yeah it depends how you want the text to display. Perhaps you want `margin: 12px...
i just tried that and it didn't seem to work. the only thing that seems to work is changing the height of each section, but then the height of each section will be inconsistent
lapis monolith
i just tried that and it didn't seem to work. the only thing that seems to work ...
How do you want it to look? Would you like the text to be aligned to the left or right? Is Ceecee's answer not what you're looking for?
stone ermine
The text itself should be aligned the way it is right now. The only thing is the whitespace in the bottom left and bottom right corner in the screenshot. Without changing the height of the activities section I can't remove it.
karmic moss
Ah you mean the white in the bottom corners vs the light green in the rest of the screenshot?
If so, you need to set .activities { height: 100%; } instead of height: 250px;
lapis monolith
Yes, this should work. Sorry, the background color is so light that I didn't notice the white parts at first.
stone ermine
If so, you need to set `.activities { height: 100%; }` instead of `height: 250px...
yep this worked, thanks!
now for the future, when should i switch from hard coded pixel values to percentages? what are some tell tale signs?
karmic moss
Generally speaking, percentages are always better because of the flexibility of screen sizes. But if you need a more precise target, REM is better than pixels as they are scalable values
https://www.w3schools.com/css/css_units.asp
Hope that helps!