Display elements in one line

Hello i want to create boards with 4 cards that will have title which have transform: rotate(-90deg); , but i want this text to have for example margin-left: 10px aplied to every card title. I dont know why every one is at other position maybe its cause i use display: flex; but i dont know how to fix it. Here is link to code: https://codepen.io/artusss0/pen/jOQEVmq
artusss0
CodePen
jOQEVmq
...
9 Replies
WebMechanic
WebMechanic2y ago
maybe its cause i use display: flex;
it is. The title "flex items" still need their space, but all you did was rotate the (stretched) box, which does not affect how flex calculates the item width. To turn text have a look at writing-mode https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode then rotate them by 180deg Why did you mix up CSS with inline style attributes? That's a nightmare to debug and error prone. You can give each of your elements several class names, their properties will be combined. Each of the .new, .in-progress, .testing, .done divs should have something like a second .box class where the sizing happens, and the four individual classes then declare their individual background colours. The text turn would then also go into .section-title instead of the inline style attribute. Have a look at creating good document structures while you're at it, esp. regarding your use of several h1 elements as the section title. Any try to use other elements than div (section seems obvious for some of them). There are some 130 more elements to use, each with special purpose and features.
writing-mode - CSS: Cascading Style Sheets | MDN
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).
artus
artus2y ago
I'll try to let you know if it works
WebMechanic
WebMechanic2y ago
I tried and it did, once I cleaned up the code. Enjoy
artus
artus2y ago
so can u send me the code or i have to do it myself
Mannix
Mannix2y ago
WebMechanic
WebMechanic2y ago
I pointed you to the solution and gave instructions. You should do it yourself if you want to learn how it works. If there's something you don't understand, you can ask, and maybe somebody else may chime in to help.
Mannix
Mannix2y ago
as suggested i used writing-mode stop declering stuff you don't actually need
artus
artus2y ago
ahh, it work, tought it will be harder to do ty so much ❤️
artus
artus2y ago
Want results from more Discord servers?
Add your server