My letter got scatter due to my css styling
my letter got scatter in my css please help me out in my browser it dispay like that my css and react file is there so you can help me out
5 Replies
It looks like your text is wrapping inside of the H1 container. If you decrease the font size it will probably be fine.
The image contains the localised date string of HH:MM:SS AM|PM.
make codepen plz
dont use font shorthand aswell as its harderd to read
dont ever set font sizes in rem
you can set line-heights unitless
so 150% -> 1.5
code you sent is incomplete
Basically the complete time doesn't fit within the available width so the browser wraps it onto a new line.
For some reason you have defined the width of the body to be 300px. This in itself is quite strange and not generally recommended.
You have then defined a very large font size for the h1 so the browser can't fit it all in on one line within the very limited amount of space that you have given it. By default the browser can't break words/strings until it finds a gap so it is wrapping the "am" onto a the new line as this is the first gap that it finds.
Finally, the "am" is overlapping the text as the default line-height for an h1 element is too small for your large font size.
The first thing that I would do is remove the body width as that is only going to cause you more problems than it resolves.
If you want all the content to be within a 300px width you would be better wrapping the content in a global container.
If you want the time to all be on one line either increase the width (ideally not even set a width) or reduce the font-size.
Alternatively you could force the browser to not wrap the text by using
white-space: nowrap; but may well cause you alignment issues further down the road.
However, if you do want the "am" to wrap onto a new line you will need to increase the line-height.What unit are you suggesting setting font sizes if not rem?
nevermind, was high. keep using rem