1. Documentation
  2. WooFramework Codex

Customizing a Responsive Theme: Best Practices

Most of our newer themes feature a responsive layout/design, meaning that the theme will adapt and scale depending on the size of the screen. This is a great feature, delivering an optimized design for different devices, but it means you need to take into account the theme’s responsive nature when customizing your theme.

Media Queries ↑ Back to top

Responsive themes use CSS media queries to apply different styles to the theme depending on the width of the screen.

For example, in the Canvas theme’s css/layout.css file, you’ll see the following code:

@media only screen and (max-width: 1000px)  { 
  .business #loopedSlider a.flex-prev { 
    left: -20px;
  } 
  .business #loopedSlider a.flex-prev:before, 
  .business #loopedSlider a.flex-next:before { 
    font-size: 16px; 
  } 
  .business #loopedSlider a.flex-next { 
    right: -30px; 
  } 
}

The media query surrounding the three CSS styles means that these styles will only be applied on screens less than 1000 pixels wide. This CSS code is saying that if the screen is less than 1000 pixels wide, the next and previous arrows on the slider should be made smaller and brought in closer to the slider so that they can still be seen.

Further down, there’s another media query:

@media only screen and (min-width: 768px) { ... }

The styles within this query will only be applied on screens wider than 768px. So this is what most users on a desktop or laptop computer will see (as long as their browser is maximised.)

Remember to check responsive layouts ↑ Back to top

What this means for you if you are customizing a responsive theme, is that any new CSS styles you add to your custom.css file will be applied to ALL screen sizes unless you wrap them in media queries.

The best approach is probably to copy the media queries you find in your theme’s layout.css file into your custom.css file. E.g. for Canvas:

@media only screen and (max-width: 1000px)  { 
  /* Styles placed here will only apply to screens less than 1000 pixels wide */ 
}  
@media only screen and (max-width: 768px) { 
  /* Styles placed here will only apply to screens less than 768 pixels wide */ 
}  @media only screen and (min-width: 768px) { 
  /* Styles placed here will only apply to screens more than 768 pixels wide */ 
}

Then make your customizations within the relevant media query, and make sure you regularly check your layout at different screen sizes to make sure everything still looks ok.

The Web Developer extension for Chrome has a very handy View Responsive Layouts tool, which will show you how your site looks on different devices.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment