CSS not working on mobile while using media query [closed]

Question

I am trying to get a media query to work on mobile. I have used the proper @ media queries along with min/max width sizes. It works on my computer but not on my mobile device. Also note, I have added the proper meta tag in the head.

<meta name="viewport" content="width=device-width,initial-scale=1">

@media only screen and (max-width: 480px){
    #top-table{
        background-color: green;
    }
}

I am using a Samsung GalaxyS5 though I would like it to work on multiple devices. I am using Chrome. When I change the size of my browser it works fine, but on mobile there are no changes.

Answer 1

It's hard to say for sure without having any more information but a few things I can think of off the top of my head would be to check that you have properly included it below any css that you have imported, for example it would need be here:

<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Another point to consider would be making sure you've linked the css, that the media queries are included in, properly. I know that sounds dumb but just make sure to double check! Finally, off the top of my head the last thing I can thing of is that you've used the media queries correctly. It is best practice to include them in a separate file, as per the example above, and make sure you know what order they go in. If you were trying to do a mobile-first platform then you would need to include them via min-width with the lowest screen resolution at the top. Or vice versa if you're doing a desktop first application. If you've double check all of this then I can only think to simply save everything and restart the program, sounds silly but I've had a number of times in several different IDE's where restarting seemingly fixed a few problems. Best wishes!

EDIT

Try formatting it like this (obviously with your own code) and see if it fixes some problems!

    @media screen and (min-width: 500px) {

    /*****BODY*****/

    #disp2 {
        display: inline;
    }

    #wrapper img {
        width: 45%;
        float: left;
        margin: 2.5%;
    }

    #wrapper .cycle-slideshow img {
        width: 95%;
        float: left;
    }

    .secondary-content2 {
        max-width: 450px;
        margin: 0 auto;
        padding: 2.5%;
    }

    /**************/

    }