スマホページのレスポンシブ対応について

Question

お世話になります。
カテゴリ用のHTMLソースを独学で作りましたが、スマホページのレスポンシブ対応がうまくいきませんでした、スクショとソースを下に貼り付けます。HTMLの初心者で、いろ色調べまして解決できなかったのでこちらで質問させていただきました。大変恐縮ですが、宜しくお願い致します。




カテゴリページ

	/*モバイル*/
	@media(max-width: 600px)
	{.container{display: grid;grid-template-columns:200px 200px;grid-gap: 1px;padding: 10px 0px 5px 20px}}

	.container{display: grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap: 80px;padding: 10px 0px 5px 20px}



	カテゴリで選ぼう

	
		
	
	
		
	
	
		
	
	
		
	
	
		
	
	
		
	
	
		
	
	
		
	
	
		
	
	
		
	


###HR######IMG0d5a82baef00f38ef6e5bc29f441c74b4.jpegIMG0###

Answer

ECマスターズの伊藤です。

> カテゴリ用のHTMLソースを独学で作りましたが、スマホページのレスポンシブ対応がうまくいきませんでした、スクショとソースを下に貼り付けます。HTMLの初心者で、いろ色調べまして解決できなかったのでこちらで質問させていただきました。大変恐縮ですが、宜しくお願い致します。

頂いたソースを拝見したところ、
レスポンシブに必要な条件が足りておりませんでした。

下記にまとめましたので、ご確認くださいませ。

１）
~に
 
がないため、最適化されない


２）
画像等、サイズ指定がレスポンシブに対応していない
→レスポンシブに対応すには、絶対値（pxなど）ではなく
可変(%など)での指定が必要になります。

例： 
img{ width:100%; } 
※現在特にサイズ指定がされていないので、
画像サイズそのままの表示となっています。


３）
@media(max-width: 600px) {
     .container {【略】} 
    } 

の内容よりもあとに 

.container {【略】 } 

が記載されているため、 
後者のCSSが優先されてしまっている。


また、レスポンシブについては、
下記サイトにて詳細を解説しておりますので、
よろしければご一読くださいませ。
https://seolaboratory.jp/89410/

ご不明な点はご質問くださいませ。

Answer

伊藤さん
ありがとうございます。
アドバイスに従って修正をかけましてできました。