Custom CSS for mobile site

Question

I am currently running my magento site with the responsive Ultimo Theme, which has been great so far. However, i am wanting to make some custom css changes to hide some elements on my site which are not compatible with my mobile view. How do i go about implementing a custom css file which is only active when my site is being read on a mobile device?

Answer 1

There should already be a custom CSS file in skin/frontend/ultimo/custom.css or somewhere in that area.

Then use media queries such as:

@media (max-width: 600px) {
 .facet_sidebar {
 display: none;
 }
}

• Jacob Morgan: can i put multiplemcustom css changes into this query?
• Mike Tim Turner: You can put as many as you want yes

Answer 2

Per the documentation of the Ultimo theme, you can add css classes to your elements like hidden-sm hidden-xs This will hide the element on smaller screens. You have the choice of xs (xtra small - phone), sm, md, lg you can also use visible-xs visible-sm to allow certain elements to be shown at various viewport dimensions