Help tweaking CSS to improve mobile functionality?

Category: 

  • Question

The website I oversee, cshub.mit.edu, needs CSS tweaking to properly display on a smart phone. My original developer, who is no longer available, suggested looking at the woothemes.com flex slider on the homepage, changing the menu widths to 100% and dropping out the float. If that doesn't work, then perhaps I should shut off the site's mobile-responsive capability entirely. Is there anyone in the community who can help walk me through this stuff? I am not a programmer/CSS expert but am pretty savvy with some light assistance.

11/18/14

Unfortunately, there's so one-size-fits-all code that makes any site responsive, because the CSS needs to react to what was used for the desktop version.

If you already have an idea of how you want the site to look and work on a smartphone screen, you can use CSS Injector to create or edit a stylesheet for responsive design and use the following to tweak the CSS specifically for smartphones:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Add CSS styles for smartphones in either portrait or landscape mode here */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Add CSS styles for smartphones in landscape mode here */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Add CSS styles for smartphones in portrait mode here */
}

Drupal Cloud also offers two options for making the menu responsive: take a look at either MIT Mobile Menu or Responsive Menus (/admin/moduleassign).

If you don't yet have a mobile design, or need more in-depth advice for your site, try MIT DCAD (http://ist.mit.edu/dcad).

11/19/14