I have no design background and have been learning as I have gone. I am now seeing that all my text has been set using pixel width and heights. When the website is opened to a large normal sized screen it looks great, but when it scales down for smaller screens it doesn’t work due to the pixels I have set.
I need help to learn how to set size the headings in order to respond properly to changing view ports? If there is tutorials, articles or anyone who is willing to help me it would be appreciated. I haven’t been able to figure it out on my own and my boss wants this to launch on Friday.
One approach whist working down the viewports is to use VW/VH (Viewport width/height) or % for elements, but as you are specifically mentioning text/headings there’s no problem with simply changing the font size as you move down.
Remember that the styles cascade down from Desktop-Tablet-Mobile, so a setting in Desktop will cascade to the other viewports as well, but you can then give the tablet and mobile there own settings (font size for example) and they won’t cascade up and change the Desktop setting.
Just as a really quick example, set a div block to 90vw on Desktop and you’ll see it is 90 per cent of the viewport, also on the tablet and mobile. Change the tablet viewport to 80vw and you’ll see that now cascades down, but doesn’t cascade up to change the desktop setting.
