Theming

Cleaning up Tables, Up-Scaled Images, and More Fun with Media Queries for Drupal 7

Last updated
Categories

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

Sprout Video

Some of the content that's been added to our case study site isn't responding ideally as the viewport size increases and decreases. We have an HTML table that is a bit too flexible, making the columns too narrow for the text inside them to be very readable. The images in our slideshow are presenting us with a problem when the screen size gets too big: the images are scaling up and losing their quality in the process. To address these miscellaneous problems, we'll change how our content is placed, find some new breakpoints, and add new media queries for our grid_6 regions. We'll also learn some CSS tricks that will transform our table data into lists, making it more legible and sensibly presented on smaller screens.

Additional resources

https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 14-cleaning-up)