25 September

Working with mobile devices dimensions in responsive css

Magento Responsive CSS Templates Themes

Hi #Magento lovers!, this week’s tip is related with responsive theme css. You may ask yourself how you can detect a mobile device dimension to change/add css elements when your theme is browsed by an iPhone or any other mobile device. It’s very simple:

In all our responsive themes, we work with 1 file to detect mobile devices by dimension and then apply corresponding css changes to amend the theme so it fits correctly. This file is responsive.css and it can be located in skin/frontend/default/yourtheme/css folder.

There are 4 basics dimensions you can use to detect an iPhone, iPad, and Nexus:

iPhone: @media (max-width: 480px) {}

iPhone Horizontal / Nexus Vertical: @media (min-width: 480px)and (max-width: 768px){}

Nexus Horizontal / iPad Vertical: @media (min-width: 768px) and (max-width: 979px) {}

iPad horizontal: @media (min-width: 980px) {}

For example take a look at this section of responsive.css file of HelloNevada Magento CE theme, where we modify some css properties of the currency switcher only when the theme is browsed by a device with a maximum width of 480px:

@media only screen and (max-width: 480px)


.currency-switch {  border-radius: 0 0 3px 0; float: right; padding: 14px 0 6px 10px;  position: relative;  width: 10%;}


Ok!, hope this tip helps you!. See ya! ;)


This post is also available in: Spanish

Back to Top