@abbas-roholamin
Latest solutions
Multipage site built with TypeScript, NextJS, and Tailwind CSS,
#next#react#typescript#tailwind-cssSubmitted over 2 years agoFull Stack Drag and Drop Todo App
#express#mongodb#react#tailwind-css#typescriptSubmitted almost 3 years ago
Latest comments
- @dorian-edwards
tldr:
- set a width 95-100% and then a max-width of your choosing to make a block level element automatically responsive
- Using relative size units e.g. rem, allows you to change one property and resize your whole site.
To answer your question, it is, and in time you'll pick up a few handy tricks that make life easier. For example setting something with a width of 100% and a max-width of say 600px will ensure that as the screen shrinks it will fill up the width of the screen up to a point. When it reaches it's max size, say on a desktop, it will max out at 600px rather than stretching the length of the screen.
Another trick I've seen used is to use rem as units for sizing. These units are tied to the root pixel size. So if your root element size is 16px (the default for a lot of browsers) then 1rem = 16 pixels. Some folks set their root to 10px directly or 62.5% -- 10px after calculating from the standard root of 16 -- to work units based on 10 instead of 16. The point of this is that on smaller screens you can change the root pixel size and everything else on your page will be resized automagically. This isn't really width related but still, it'll help with responsive design.
Marked as helpful - @AsimKachhap@dorian-edwards
If a div has a width < 100% or < 100vw you can use "margin: 0 auto" to center it as well. the 0 sets the margin along the y axis, top and bottom, to 0, and auto will put enough margin on either side of your div along the x axis to set it in the middle of the screen.
The div element is block level by default so this works, if you override the display of your div and make it inline or inline-block, this will no longer work.
