How To Customize Responsive Designs & Themes

Customizing responsive designs or themes to accommodate all mobile resolutions in an ideal fashion to produce a beautifully mobile-friendly responsive website isn’t easy. If you want to make your website unique you’ll need to understand how to modify responsive designs. This is a brief overview of the standard ways to go about customizing responsive designs to meet your website’s needs.

Standard Mobile Resolutions

  • Mobile portrait (320×480)
  • Mobile landscape (480×320)
  • Small tablet portrait (600×800)
  • Small tablet landscape (800×600)
  • Tablet portrait (768×1024)
  • Tablet landscape (1024×768)

@media CSS Rule

The @media CSS rule can be set to type screen in order to use different styles for different screen resolutions. For example, if I wanted styles to only apply to the standard mobile portrait resolution, I would use the following @media CSS rule:

@media only screen and (max-width: 480px){
 /* I would place whatever CSS I want to apply only when the screen resolution is less than 480 pixels wide here. */
 }

If I wanted to target small tablet screen resolutions only, I would use the following:

@media only screen and (min-width: 600px) and (max-width: 800px) {
 /* I would place whatever CSS I want to apply only when the screen resolution is between 600 and 800 pixels wide here. */
 }

If I want to target desktop resolutions, I’d just place my CSS rules for desktop resolutions outside and above the @media rules, so when the @media rules occur they override the desktop ones.

!important CSS Declaration

The !important CSS declaration can be used to override pre-declared CSS styles regardless of its location in the stylesheet. It can come in quite handy when working with responsive designs. At the same time; however, it is a good practice to try to minimize its usage.

For example in the following case, the h1 font size would be 2em, even though 1em was declared last:

h1 (font-size: 2em !important; }
h1 { font-size: 1em; }

Hiding/Showing Elements Based On Resolution

Sometimes it is necessary to completely disable certain elements on smaller resolutions. For example, if you have a Leaderboard banner (728×90) on your website it clearly isn’t going to fit on a 320 pixel wide screen. In this situation, it makes sense to simply hide the element from view.

In order to handle the Leaderboard example, we would just hide the element (for this example lets say it’s tagged with the id “leaderboard”) for resolutions under 728 pixels wide with the following CSS:

@media only screen and (max-width: 727px) {
#leaderboard { display: none; }
 }

Lets say you wanted to show a message only to smartphone visitors (for this example lets say it’s tagged with the id “smartphone-message”), this could be done with the following CSS:

/* This will disable the display of any element with ID "smartphone-message" by default */
#smartphone-message { display: none; }
@media only screen and (max-width: 480px) {
/* This will toggle the display CSS to inline only when the resolution is less than 481 pixels */
#smartphone-message { display: inline; }
}

How Stylesheet Ordering Works

The last CSS rule wins, unless there are !important declarations being used. This means the last CSS file loaded for a given page and the last line in that CSS file that applies to a given class, id or element is what will be used. If there are !important declarations being used the same rules apply, except the last CSS rule with the !important declaration wins instead.

For example in the following case, the h1 font size would be 1em simply because it was set as font size 1em last:

h1 (font-size: 2em; }
h1 { font-size: 1em; }

Positioning & Sizing Tweaks

Generally speaking it will be necessary to adjust the positioning & sizing of your website’s content to work on the various standard mobile resolutions. The best way to go about this is to adjust your styles based on how your website currently renders on the various resolutions. A quick way to see your website in all the standard mobile resolutions is to use Google Chrome’s Web Developer extension. Once installed, you simply go to Resize > View Responsive Layouts. Each responsive design has different breakpoints. Breakpoints are where your styles are adjusted based on the width of your Browser’s screen. If your site is simple enough it may be possible for you to remove some of these breakpoints to save you some time, it really depends on how your site is currently rendering on the various standard mobile resolutions.

Once you see your website in all the standard mobile resolutions, it will be clear to you what positioning & sizing tweaks will be necessary to accommodate all of resolutions. You just need to make sure that your site is functional and pleasant to view in the various resolutions. By the time you get to the smartphone resolutions it will be evident that you’ll have to expand a lot of widths to 100% and possibly adjust some font sizes to ensure readability. These tweaks can be accommodated with the methods described above.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here