bootstrap4でaタグのテキストをスマホレスポンシブ対応したい

Question

前提・実現したいこと

bootstrapで作成した画面のaタグテキストをレスポンシブ化して、
文字サイズを画面サイズに応じて変更したいのですが、
googlecromeで画面サイズをスマホサイズにしても文字サイズが変化しません。
ご教示いただければと思います。

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

該当のソースコード

// 大デバイス（デスクトップ, 1200px 未満）
@media (min-width: 992px) {
 a {
   font-size: 7.0rem;
 }
}
// 中デバイス（タブレット, 992px 未満）
@media (max-width: 991.98px) {
 a {
   font-size: 4.0rem;
 }
}
// 小デバイス（横向きモバイル, 768px 未満）
@media (max-width: 767.98px) {
 a {
   font-size: 2.0rem;
 }
}
// @include media-breakpoint-up(sm) {
// 極小デバイス（縦向きモバイル, 576px 未満）
@media (max-width: 575.98px) {
 a {
   font-size: 1.0rem;
 }
}

<div class="shop_list">
  <div style="width:250px;height:250px;" class="border border-dark rounded">
    <h2 class="shop_name"><a href="/test/">テスト</a></h2>
  </div>
</div>

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

bootstrap4

Answer 1

こんにちは。

ご提示の通りにSCSSではなくてCSSであるならば、//で始まる行はコメント文として解釈されませんので、文法エラーになっていると思います。

コメント - CSS: カスケーディングスタイルシート | MDN

Comments

[takahiro00]

ありがとうざいます。
//行を削除したら動きました。