I’m using a small coloured box to highlight topical things on a web site. It uses this code or simpler versions. However, when I insert it it looks good on desktop, but when I view it on a smartphone, the text inside it doesn’t scale, or the box size. It shows the original 12 pt and box size while the rest of the page scales. Even if I take out all the font attributes it still keeps default font size.
I don’t know anything about screen scaling so any ideas would be appreciated.
Now that I can see your div code you should get rid of style="width: 450px;"
and just have the width set in your CSS.
You can try width: auto; which will make your div take up as much space as it can in the viewport.
or you can use something like width: 10% if you only want it to take a certain amount of the viewport width.
If the width of .highlight does not need to be limited for layout purposes, it should have NO width assigned, auto or otherwise. If it does need to be limited, we would need to see surrounding code to make a recommendation. The choices usually being a percent of the width of the parent container (as @Joelkuiper mentioned) or {max-width:value}. Again, it depends on the needs of the page. One should not assume that a width needs to be assigned to a container without a reason. Fixed widths and fixed heights are not responsive and should be avoided in large doses.
The font size will not scale unless you assign a scalable unit of measure such as vw or change the font size in media queries.