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
Showing posts with the label CSS
- Other Apps
My previous post had a table that the browser pushed outside the defined dimensions, making half of it un-viewable. Beside the rather narrow body for the blog, which by-the-way makes it easier to read, most browsers just don't know how to break text strings that do not have white space. Turns out there is some CSS code that can be used that will correct this in most browsers. Use the following two CSS properties in your table definition (adjust width to meet your need). table-layout: fixed; width: 425px; Surprisingly, if you use Firefox, it shortens the width correctly but it still has trouble wrapping some lines, while IE and Safari seems to render the entire table correctly. Visit the W3C site to get details on other table options .
- Other Apps