Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

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

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:02
    Cleaning Up Tables, Up-scaled Images, and More Fun with Media Queries
  • 0:04
    with Amber Himes Matz
  • 0:07
    We've accomplished quite a lot,
  • 0:09
    to transform our designed for desktop
  • 0:11
    theme into a mobile-friendly, responsive website.
  • 0:14
    But we still have a few things to address and clean up.
  • 0:18
    We have added some content to our site that
  • 0:20
    isn't being as responsive as we would like.
  • 0:23
    And we're left with some unintended consequences.
  • 0:26
    There's a handful of miscellaneous tasks

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

Loading...

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.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

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