Opencart – CSS Media Queries

Having an Opencart responsive website is becoming more and more important in today’s world of the great mobile device along with other devices such as the iPad. Even though Opencart 2.0  is already responsive it may not suit your needs if you decide to alter the core theme. The more advanced a theme gets, then the more complex your CSS will need to be especially if you decide to go responsive. There is a feature in CSS that allows you to address very specific elemental sizing according to what device the user is on. This feature is called Media Queries

What is a Media Query

A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Media queries, added in CSS3, like already mentioned above let the presentation of content be tailored to a specific range of output devices without having to change the content itself. In short it allows you to change the size of a <div> element and alter the entire style.

Media  queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

Actual Syntax

So let’s demonstrate how this actually looks.  First make a back up of your website. Whatever theme you are using at the time is the style sheet that you want to open. Once open, paste this code at the very bottom of the style sheet

<!-- CSS media query within a stylesheet -->
@media (max-width: 600px) {
  .replace_me {
    display: none;

1) Now, pick any <div class=”whatever”> in a template page found within your theme and remember the class name.

2) Replace .replace_me with the name of that class. 3

3) Now load up your website and guide the browser to that page where the template is found.

4) Take your mouse and shrink down your browser window by dragging the corner. This simulates other devices and their varying sizes. You will see the element replace_me disappear when the device that is looking at the page hit’s 600px. Whatever element you specified is whatever portion of the web page that will disappear.

There are a lot of different ways to use Media Queries and even can be used with logical operators  for example:

<code class=" language-css"><span class="token atrule">@media (min-width<span class="token punctuation">:</span> 700px) and (orientation<span class="token punctuation">:</span> landscape)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></code>

 Using NOT

The not keyword is to the whole media query and will return true only if the media query will otherwise return false example (such as monochrome on a color display or something that has a screen width of 600px with a min-width: 750px featured). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

<code class=" language-css"><span class="token atrule">@media not all and (monochrome)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></code>

I have found that true responsive websites will more than likely need to make use of the media query because it’s very difficult to script a Global CSS style rule that applies to all devices. It IS possible, but very difficult. Using Media Queries especially if you decide to boost your websites responsive capability will allow you to have even “more” freedom.

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *