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
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?
Thanks for your answer I had the width just now before I put it tthe overflow was already
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 toothanks sir for your answer
the question now should I percent % to define te width or height
Don't use defined widths/heights unless there's a good reason to
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:
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.
Good evening I was waiting your answer
🙂
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 😛 )
thanks