テーブルはモバイル用にスタイルされていません| CSS

Question

2つのスタイルシートにいくつか問題があります。 私は自分のウェブサイトをモバイルフレンドリーにしようとしていたので、モバイル向けに別々のCSSファイルを作成しました。そのような：私は特定の問題のためのモバイル1でメインのCSSファイルをoveridingで問題に遭遇してきた場合を除き

<link rel="stylesheet" type="text/css" media = "screen" href="css/services.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type= "text/css" href="css/mobile/services.css" 
    media ="only screen and (max-width: 500px)" /> 

（一部のみが上書きされていません。他のすべての罰金です）。 "CSS/services.css" で

（メイン1）私が持っている：

#pricing{ 
    margin: 0px; 
} 
.pricing_tables{ 
    width: 600px; 
    margin-bottom: 100px; 
} 

をそして "CSS /モバイル/ services.css"（モバイル版）に私が持っている：

#pricing{ 
    width: 270px; 
} 
.pricing_tables{ 
    margin: 0 auto; 
    width: 270px; 
    margin-bottom: 30px; 
} 

基本的には、幅を小さくすることはできません。しかし、私は今まで問題に遭遇していません。

私が変更しようとしている要素はテーブルです。 #pricingも幅で設定されています：270px

ありがとうございました！

Answer 1

あなたの人生を単純化して2つのスタイルシートを1つにまとめる理由がありますか？

これはあなたが助けかどうかを確認してください： http://codepen.io/panchroma/pen/BpNMvz

CSS

#pricing{ 
    margin: 0px; 
} 
.pricing_tables{ 
    width: 600px; 
    margin-bottom: 100px; 
} 

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

    #pricing{ 
    width: 270px; 
    } 
    .pricing_tables{ 
    margin: 0 auto; 
    width: 270px; 
    margin-bottom: 30px; 
    } 

} 

を