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?


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;
  • can i put multiplemcustom css changes into this query? – Jacob Morgan Mar 9 '17 at 16:48
  • You can put as many as you want yes – Mike Tim Turner Mar 9 '17 at 16:49

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.