Search code examples
csshtmlmedia-queriestablet

CSS media screen

I'm using a Joomla template which adapts to diferent screen sizes. When the screen has no enough width the "main menu" changes to the mobile version. This works fine on mobile phones and small tablets, but on big resolution tablets like the ipad mini, the main menu won't change to the mobile version.

My aim is to always display the mobile version of the menu, no matter how big is the screen of the device.

I believe that what I need to change is this line on the css file:

@media screen and (max-width: 750px){

I tried changing 750px to 1080px but nothing happens. I even changed 750px to 10px and the website behaves the same.

All @media queries:

/* MOBILE ONLY CALLS
----------------------------------------------------------- */

@media screen and (max-width: 750px){

/* VERY SMALL CSS
----------------------------------------------------------- */

@media screen and (max-width: 240px){

    /* Retina Display Images */
    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

The original css file: http://www.mediafire.com/view/s4ng67ng6m4g4f9/s5_responsive_bars.css

Solution

  • There would be some class to hide the main menu and show the mobile like .main-menu { display: none; } .mobile-menu { display: block; }.

    You have to find that, put it outside of media queries and remove all menu class instances from media queries.

    Hope this helps