Responsive su firefox che non funziona..

Salve, ho un problema solo con un browser sia in desktop e che mobile..gli altri browser tipo google chrome e samsung browser funziona senza problema.

Mi dite come faccio ad scrivere codice responsive senza ripetere per ogni volta il blocco di codice.

Il mio codice per fare il controllo “desktop” e “mobile” lo messo nel functions.php , non so se è il metodo giusto perché non riesco ad trovare informazioni giuste, vi incollo un esempio:

/*  Include Script e stili
/* ------------------------------------ */
function scripts_and_styles() {

	// inzio codice jquery
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), array(), false, true);
		wp_enqueue_script('jquery');
        wp_register_script( 'script', get_template_directory_uri() . '/js/scripts.js', array(), false, true );
		wp_enqueue_script('script');
	}

	// inizio stili personali
	wp_enqueue_style('sito', get_template_directory_uri().'/style.css');
    wp_enqueue_style('sito-ipad', get_template_directory_uri().'/css/ipad.css');
    wp_enqueue_style('sito-galaxy', get_template_directory_uri().'/css/galaxy.css');
    wp_enqueue_style('sito-galaxy-tablet', get_template_directory_uri().'/css/galaxy_tablet.css');
    wp_enqueue_style('sito-iphone', get_template_directory_uri().'/css/iphone.css');
        
   
	// fine stili personali

	if (is_singular() && comments_open() && get_option('thread_comments')) {
		wp_enqueue_script('comment-reply', false, false, false, true);
	}
	
}
add_action( 'wp_enqueue_scripts', 'scripts_and_styles' );

nel file che ora sto testando è il smartphone galaxy s5 ed il suo css è questo:

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
{
    .header__menu{
        width:100%;
        height: 0;
        overflow: hidden;

    }
    .header__menu .menu-item{
        display: block;
    }
    .header__menu .menu-item a{
        display: block;
        padding:10px 15px; 
        border-bottom:1px solid orange;
    }

    .header__icon-bar{
        float: right;
        display: block;
    }
    .show-menu{
        height:auto;
        overflow: auto;
    }

    .container
    {
        width: 100%;
        margin: 0 auto;
    }
    #main{
        width: 100%;
    }

    aside{
        width: 100%;
    }

    #banner .logo{
        display: none;
    }

    #banner .marmocarrara
    {
        display:none;
    }
    footer {
        width: 100%;
    }
    footer .copyright {
        width: 100%;
    }

    footer .social, .social li
    {
        width: 100%;
    }

    /* Gallery */
    .gallery-caption{
        font-size: 12px;
    }

    .g-recaptcha {
        transform:scale(0.77);
        -webkit-transform:scale(0.75);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }

}

scusate se ho messo il codice qui.. invece su altri siti code… ma vorrei che le persone non andrebbero ad cliccare su servizio esterno,

quindi qual’è il problema di firefox ? perché in google chrome e samsung browser funziona tutto normalmente.

Grazie mille e buona domenica e inizio settimana.