Element not responsive

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:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Hello @Annestezia and @bbsmooth
Thank you for the response :slight_smile: . 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 :smiley: