Posts

Showing posts from August, 2014

Columns side-by-side or stacked -- CSS to adjust for screen width

Image
I recently had to brush up on my CSS skills to develop a solution where two buttons would appear side-by-side unless the viewport was less than 480 pixels, in which case they should then display stacked. Through a bit of research, I found a couple of solutions. When I tried to implement the solutions as presented, the buttons didn't appear side-by-side, but instead on separate rows -- I'm sure something I must have overlooked, but nevertheless, I, therefore, came up with my own modified solution.

My particular example used 3 columns -- the middle just for space, which could be done with padding and/or margin. The key is using "@media." By default the widths of the columns were all set for 100% -- configured for stacking. When the screen was 480 pixels or larger, using "@media" the widths are adjusted 45%, 10%, and 45%. If you're not sure what each of these CSS properties does for you, try searching "css [property]" such as "css clear&quo…