特定の画像のみサイズ変更したい

Question

前提・実現したいこと

Liquid（Shoptfy）でウェブサイトを作っています。
レスポンシブデザインで特定の画像サイズの大きさを変更したく、theme.scss.liquidと名付けたテーマにコードを記載していますが全ての画像（　class="resp-img-wrapper"）が大きく・小さくなってしまいます。
特定の画像、後述する.product-single__photos imgのサイズ変更ができないか頭を悩ましています。

発生している問題・エラーメッセージ

//theme.scss.liquid

//responsive images
.resp-img-wrapper {
  width: 100%;
  margin: 0 auto;

  &.js {
    position: relative;
  }
}


//試した記述
@media(max-width:670px)
.product-single__photos img{
  width:100px;
  height:auto 0;
}

@media(min-width:1200px)
.product-single__photos img{
  width:60px;
  height:auto 0;
}

該当のソースコード

<div id="ProductImageWrapper-15284632256625" class="resp-img-wrapper js">
<div style="padding-top:100.0%;">
<img id="ProductPhotoImg" class="resp-img product-single__photo lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_300x300.jpg?v=1597110065" data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="1.0" data-sizes="auto" data-image-id="15284632256625" alt="Tiana Khasi / Meghalaya" data-product-featured-image="" data-srcset="//cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_180x.jpg?v=1597110065 180w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_360x.jpg?v=1597110065 360w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_590x.jpg?v=1597110065 590w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_720x.jpg?v=1597110065 720w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_900x.jpg?v=1597110065 900w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1080x.jpg?v=1597110065 1080w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1296x.jpg?v=1597110065 1296w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1512x.jpg?v=1597110065 1512w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1728x.jpg?v=1597110065 1728w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_2048x.jpg?v=1597110065 2048w" sizes="295px" srcset="//cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_180x.jpg?v=1597110065 180w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_360x.jpg?v=1597110065 360w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_590x.jpg?v=1597110065 590w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_720x.jpg?v=1597110065 720w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_900x.jpg?v=1597110065 900w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1080x.jpg?v=1597110065 1080w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1296x.jpg?v=1597110065 1296w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1512x.jpg?v=1597110065 1512w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_1728x.jpg?v=1597110065 1728w, //cdn.shopify.com/s/files/1/0034/7910/9745/products/Tiana_Khasi_Meghalaya_2048x.jpg?v=1597110065 2048w">
</div>
</div>

試したこと

@mediaの記述を行いました。が、画面は崩れてしまい正しくないのかなと思い、実際の環境ではコメントアウトにしています。

補足情報（FW/ツールのバージョンなど）

初めての投稿です。
LiquidでHTMLの記述を行う箇所が見当たらなかったためviewportの記述をどこにすれば良いかもわからずです。
わかりづらい箇所がございましたら追記いたします。

12/19 追記

ご質問・回答あありがとうございます。
ご指摘いただいたことを試してみましたので回答をまとめておきます。

・id指定してもききませんか？
確認のためにサイズをもっと大げさに小さくしたり大きくしてみたり

→下記のようにしてみましたが、ページが崩れてしまいました。

//スマホ
@media(max-width:670px)
#ProductImageWrapper-15284632256625 {
  width:80%;
  height:80%;
}

//PC
@media(min-width:1000px)
#ProductImageWrapper-15284632256625 {
  width:10%;
  height:10%;
}

Comments

[m.ts10806]

id指定してもききませんか？
確認のためにサイズをもっと大げさに小さくしたり大きくしてみたり

[youseikun]

m.ts10806様、アドバイスありがとうございます。
いただいたアドバイスで行ってみましたが（上の質問にコードを追記しました）ページの崩れがありうまくいきませんでした。class="resp-img-wrapper js"がかかっているほかの画像の大きさは現状のままで良いのですが...

Answer 1

こんにちは。

.product-single__photos img→img.product-single__photosでいいのではないかな、と思うのですが、ダメですか？

コメントを受けて追記

スマホ表示では80×80の正方形表示、PCでは10×10の正方形表示

では、こんな感じでいいかと思います。

サンプル

//theme.scss.liquid

//responsive images
.resp-img-wrapper {
  width: 100%;
  margin: 0 auto;

  &.js {
    position: relative;
  }
}


//試した記述
@media (max-width:670px){// "{"忘れ
// .product-single__photos img{ クラス名の誤り
  img.product-single__photo{
    width: 80px;
  }
}  // "{"忘れ

@media (min-width:1200px){
  img.product-single__photo{
    width: 10px;
  }
}

Comments

[Lhankor_Mhy]

ああ、違うかな？
これって、画像を正方形にしたいのですか？

[youseikun]

Lhankor_Mhy様、アドバイスありがとうございます。
ご回答いただいたことを試しましたがページが崩れてしまいました。

用意されている画像そのものが正方形なのでおっしゃる通りです！
抽象的な言い方ですが、スマホ表示では80×80の正方形表示、PCでは10×10の正方形表示にできれば目的達成になります。

[Lhankor_Mhy]

「PCでは10×10の正方形表示」とのことですが、ご提示のコードでは「width:60px」などとなっており、そのような意図になっていないように見えます。
ご提示のコードは無視してよいのでしょうか？

[youseikun]

ほかの質問者様から「極端にサイズ変更をしてみては？」とアドバイスいただいたことを失念して提示しておりました汗　
提示しているコードは無視していただいて大丈夫です。
また、追記ありがとうございます。こちら試していきます。