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
9 Replies
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).
I'll try to let you know if it works
I tried and it did, once I cleaned up the code.
Enjoy
so can u send me the code or i have to do it myself
https://codepen.io/MannixMD/pen/BaGyQOo cleaned uped version
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.
as suggested i used writing-mode
stop declering stuff you don't actually need
ahh, it work, tought it will be harder to do
ty so much ❤️
