Resources for responsive design

Question

Hi there:

So I have a tiny bit of knowledge about web design and understand the principles, but I keep getting it wrong when making my site responsive. Does anyone know where I can take a deeper dive to better understand when to use %, pixels, fr, min-max widths, etc.?

For example, I started reading through Bootstrap's documentation, but it only seemed focused on min-max widths. Editor X Academy is too surface level to help me understand further.

Thanks in advance!

Doug Cobb · Accepted Answer

Hank, I have a question. So if I want my site to be responsive across desktop, tablet and phones, which settings do I need to use so it automatically resizes appropriately? Do I need to use grids to make this work?

Hank · Answer

%Use percentages whenever you want an element to take up a percentage of another container or the entire screen.  Percentages are dependant on the size of their parent container.  If I have a parent container that is 100px wide and I have a child container within that set to 50% it will be 50px wide.  If the container has no parents (except for the section) it will be limited to the width of the browser window and the height of the section when its values are set with percentages.pxPixels are not a responsive unit and should be used whenever an element should remain static despite the width or height of the viewport or container the element is in.vw & vhMost of the time we can get away with using percentages to make content take up variable amounts of space on the page but sometimes we need to use absolute units to do the same thing.  If you need to have an element within a container take up 100% of the browser height you can do that with 100vh which will work independently of the size of its parent container's size.  vw units are also useful for setting up padding that will scale based on the device's width as typically you'll want less horizontal padding on mobile compared to a desktop screen.frFraction units are only used with grid elements and they are the easiest way of setting up responsive grids.  We can set grid columns and rows with percentages or pixels if we want but fr units will automatically calculate the space they should take up.  If you want three equal columns in a grid for example you could set them all to %33.3333 or just 1fr each which is much cleaner and you'll get the same result.  Why do the math when the browser will do it for you!min & max widthsResponsive units are great but sometimes they will make elements get larger or smaller than you want them to.  With min-width we can define a minimum possible width in pixels so that the element can grow if given more space but will only get as small as we tell it to, the opposite is of course true with max-width.  Often you may want to define a min-width and a width as well in order to allow an element to grow as a percentage of its parent container while only shrinking to a certain set size.Hope this helps y'all.

Community X.

Editor X

Resources for responsive design