Responsive Design Tips – Drupal and Adaptive Themes Core (Subthemed) – First step

Getting started is sometimes the hardest part.

Image

For testing mobile design, you can simply resize your browser to see how the media queries are responding. literally drag the window and make it more narrow – height doesn’t matter.

I have an AT Core subtheme that I have customized. Using a subtheme is important so the core can be updated without wrecking your customizations. Make your first change in the file –

responsive.smartphone.portrait.css – if you have subthemed correctly, this will be in the css folder of your subtheme.

in my case, I changed the font size to something goofy – 212% using the wonderful apatana studio. I save changes, resize the browser window and watch the font expand to the new size. It doesn’t look good; that isn’t the point. All I have shown is where specifically to make the change and test the change you have made.

Image wide browser screen – desktop settings

Mobile settings with narrow browser. Note the now ginormous font!

Image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: