#responsive coding

minimum and maximum widths

first and foremost, when you work with responsive coding, you have to know that it is not going to look the same on every screen. that’s the whole point of responsive coding! there is, however, a point on both sides of the spectrum when things are either too tiny on a small screen and spill over and/or they’re just too stretched out for those with particularly large monitors.

this is where minimum and maximum widths come in!

figuring out what works best for what you’re working on is super helpful using that screen emulator. just click + drag until things are too small and then ta-da, your minimum should be no less than that. do the same for maximum width as well. this is helpful for flex containers.

for example, my parkside ave skin’s menu began to look very condensed at 801px and i no longer think that’s useable as in. 

as such, the min-width for this skin is 850px. anyone on a smaller screen will have to scroll horizontally, but it beats the menu being unusable. some of this is personal preference and common sense but this helps you figure it out.

what would that look like in the css? say that you want the skin wrapper to be 80% of the screen with a minimum width of 850px and you’ve decided it shouldn’t be wider than 1600px because then everything looks too far apart. it would look like:

width: 80%; min-width: 850px; max-width: 1600px;

you’re telling the css “hey i want it to be 80% of the screen, but just between these numbers. if 80% is less than 850px, keep it 850px. if it’s more than 1600px, keep it at 1600px.”

you can do the same thing with height, if that’s something your code wants/needs as well. 

@media queries

the other big thing that i do with my responsive skins is use media queries! this declares different css based on screen size. for example, my skin this is gospel has a minimum and maximum width for the sidebar but on small screens, the wrapper overlaps it. 

the way to solve this problem is to put the sidebar on top and to move it to the top left of the screen with positioning. right now, this is what the css looks like:

#sidebar { width: 30%; min-width: 380px; max-width: 600px; height: 100%; top: 0px; right: 0px; }

for screens smaller than 770px, where we first noticed the overlapping we want to change it to:

#sidebar { width: 100%; height: 50px; top: 0px;  left: 0px; }

how do we do that? a media query. a media query basically tells the site “hey, i want to know what the screen width is, and if it’s smaller than a certain amount, i want to use a different set of css to style the same divs.” to declare it, we’re going to need to set up the media query like so:

@media only screen and (max-width: 770px) {

}

now the site knows to look to see what the width of the screen is. anything 770px and smaller will get the new css, and anything above 770px gets the original css.

all together, this is how the css looks:

@media only screen and (max-width: 770px) {   #sidebar { width: 100%; height: 50px; top: 0px; left: 0px; }

}

and this is what the page itself will look like once i’m on a screen smaller than the max-width:

this can be used to hide entire divs (such as avatars too big to fit on the page, or a flex container that is still too big) or add new divs (a mobile-specific menu that has big buttons for touch screens instead of small, close together icons). the sky is the limit there! there will be times you will need to add !important to get the css to override but it’s a quick fix.

but that’s about it! that’s how i go about responsive coding, and hopefully it’s helpful for you all! it’s a lot of trial and error, but that screen emulator makes it about a thousand times easier.