Hello campers,
I’m attempting my 5th project of the front end curriculum, and I’m stuck
I’m trying to write some content for the “About” section, but when I try to check the responsiveness of the said text, the text doesnt shrink with shrinking window size. I’m not able to understand what’s wrong(I’m even using relative font measures.)
Can someone help me with this?
Link to Codepen:https://codepen.io/sambarvadai/pen/zYqxgdx
Hello,
Do you mean that you’re using em for font size an your font is not changing size on window resize?
em is relative to Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. mdn
But font size of parent is not changing either unless you change it
One of most obvious things you can do ( and not the best solution) you can set font-size in vw (viewport width), but on small screens text gets ungeadable, or you could change font size with media queries.
There are combinations of different techniques to make it fluid
Do you mean that the width of the content doesn’t change as you narrow your browser and you get a horizontal scroll bar? Or you do you mean that the font size doesn’t get smaller?
The current <h3> heading on your page isn’t line breaking as you narrow the browser window because it is one big string with no white space. If you want it to break at the dots then you can add the <wbr> tag:
Hello @Annestezia and @bbsmooth
Thank you for the response 
. I managed to figure this out and used a media query to shrink the title at the break-point where the scroll bar was appearing and the heading was going out of the viewport.
Once again, thank you so much for your help. It gave me some ideas to figure this out. Also got me to learn a new html element 