A div who overflow

Hi every one I realise this page But the problem is some div overflow I try to find what how to solve the problem but I can t please can I get some idea about the way to fix it? thanks by advance https://codepen.io/alpha_66/pen/poQWoBP?editors=1100
9 Replies
13eck
13eck•12mo ago
It's because you have so many set widths everywhere, it has no choice but to overflow. You shouldn't be setting a fixed width, instead let the content determine the width of most elements. And so many absolute positions. Why?
Pat66
Pat66•12mo ago
Thanks for your answer I had the width just now before I put it tthe overflow was already
Kevin Powell
Kevin Powell•12mo ago
An overflow won't happen on it's own, it's either through setting fixed widths or through positioning that it happens. For example, the title. Before you did the transform, it's breaking on two lines because it's a narrow space. When you add white-space: pre to prevent it to break, it overflows. You rotated it after because you want it vertical, so after that the easiest it probably to translate it to move it down. There might be away to do it all by chaningg the writing mode too
Pat66
Pat66•12mo ago
thanks sir for your answer the question now should I percent % to define te width or height
vince
vince•12mo ago
Don't use defined widths/heights unless there's a good reason to
Chris Bolson
Chris Bolson•12mo ago
As you are using grid, you should define the widths and heights there. As for your h1 text, try changing you current transform to this:
writing-mode: vertical-lr;
transform: rotate(180deg);
text-orientation: mixed;
writing-mode: vertical-lr;
transform: rotate(180deg);
text-orientation: mixed;
I have forked your codepen and made some changes which I can share but you may prefer to work it out for yourself - let me know if you want me to share it.
Pat66
Pat66•12mo ago
Good evening I was waiting your answer
Chris Bolson
Chris Bolson•12mo ago
🙂 Here is my codepen https://codepen.io/cbolson/pen/MWzEKer?editors=1100 I maintained most of what you had but simplified the main grid and some of the CSS. I hardly touched the HTML, just removed some of the excess (though was tempted to remove more 😛 )
Pat66
Pat66•12mo ago
thanks