Question regarding responsiveness
Hey guys, so I have a question regarding making responsive videos, watchin @kevinpowell 's course he says that when writing code mobile first we should stick to using breakpoints (as less as possible) and use min-width on our media queries so, I understand that and how it works, but I am curious on knowing if we should use max-width on our paragraphs and titles before using media queries or should we just stick with just using media queries when things break. (I am talking when writing responsive code mobile first)
4 Replies
If you apply a max width to a paragraph/element it will default to 100% as soon as the screen/container gets smaller than the set value.
So for example if a paragraph was set to about 700px wide, it will appear 100% on a screen size lower than 700px, and will appear as 700px on screen sizes higher.
I usually set a max width at my base layer as it's pretty rare that youd need to change this max width at a lower breakpoint unless you are going for a particular designy style.
If you want to go for a gradual decreasing max width for larger and smaller screen sizes you can do easily with clamp, but just be aware of A11Y when doing this as wide paragraphs can be troublesome for people (I think the suggested max is 75/80ch)
So using containers and setting a max-width to the container is the right way of dealing with things?, instead of using max-width on elements
You could do a
max-width: 70ch or whatever on your paragraphs for sure.
Rather than mobile first, for me it's the least amount of styling. So if I can set one max-width and not even need a media query, that's a win.Thanks Kevin, the reason why I got confused a little bit was because on your "Conquering Responsive Layouts'' course you don't really use max-width on things such as texts, titles ect you use media queries only, because you've teached me that nothing is set in stone I am simply looking for the righter way to deal with things (if we can call it that lol) on css and programming in general