CSSが適応されなくなりました。

Question

コードを修正していたら、突然CSSが適応されなくなりました。
エディタはVScodeを使っています。

修正していた部分は以下です。

<!--Start Clients Section-->
<div id="clients" class="offset">

<!--Start Jumbtron-->
<div class="jumbtron">
	<div class="col-12 text-center">
		<h3 class="heading">Clients</h3>
		<div class="heading-underline"></div>
	</div>

	<div class="row">
		<div class="col-md-6 clients">
			<div class="row">
				<div class="col-md-4">
					<img src="img/client1.png">
				</div>
			<div class="col-md-8">
				<blockquote>
					<i class="fas fa-quote-left"></i>
					I see Nuno support as more of a partner to my company than a resource. I can pick up the phone and talk to anyone at any time and the way that they interact with us as a business makes it really simple.
					<hr class="clients-hr">
					<cite>&#8212; Eric, Small Business Owner</cite>
				</blockquote>
			</div>
		</div>
		</div>

		<div class="row">

			<div class="col-md-6 clients">
				<div class="row">
					<div class="col-md-4">
						<img src="img/client2.png">
					</div>
					<div class="col-md-8">
						<blockquote>
							<i class="fas fa-quote-left"></i>
							I see Nuno support as more of a partner to my company than a resource. I can pick up the phone and
							talk to anyone at any time and the way that they interact with us as a business makes it really
							simple.
							<hr class="clients-hr">
							<cite>&#8212; Rachel, Professional Photographer</cite>
						</blockquote>
					</div>
				</div>
			</div>
	</div>
	</div><!--End Row-->
</div><!--End Jumbtron-->

	<div class="col-12 narrow text-center">
		<p class="lead">Want to learn more about developing Bootstrap Themes?</p>
		<a class="btn btn-secondary btn-md" href="#" target="_blank">Bootstrap Course</a>
	</div>

</div>
<!--End Clients Section-->

しかし、この部分を修正していたのに、すべてのクラスにCSSが適応されなくなってしまいました。
HTMLのテンプレはしっかり読み込んでありますし、スタイルシートでCSSを指定もしてあります。

それとも、どこか触ってしまうと、CSSが適応されなくなるショートカットとかあるのでしょうか？

＜追記＞
上記のCSS部分です。

/*--client Section--*/
.clients img {
  width: 100%;
  border-radius: 50%;
}
blockquote .svg-inline--fa {
  color: #1ebba3;
  margin: 1rem;
}
.clients-hr {
  border-top: .05rem solid #1ebba3;
}

Comments

[m.ts10806]

cssもご提示ください。
また、背景色をbodyに指定するなどひとめでわかる検証もしてみてください

[xebme]

日本語は「適応」ですか「適用」ですか。

[退会済みユーザー]

CSSを追加させていただきました。
bodyに背景色を指定したところ、反映されたので、フォントや画像などの大きさのみが反映されていないことになります。
メディアクエリも設定してありますが、反応しません。

言語設定はenです。メモにしか日本語は使っておりません。

[退会済みユーザー]

今気づいたのですが、VScodeからlive serverでchrome上にファイルを開くと、CSSが適応されないのですが、直接ファイルをchromeへドラッグするとしっかりCSSは適応しています。

[m.ts10806]

では実際は特に問題は発生してないと言えると思います。

Answer 1

間違ってクラスを消していました。

Answer 2

こんにちは。
コード拝見しました。

head部分を確認すれば最適な回答ができると思いますよ。

Answer 3

修正していた部分を html の body 要素全体として、Chrome で試してみました。

clients-hr クラスの border-top は認識できましたので、headタグ内で <link rel="stylesheet" href="〇〇.css"> が指定できていれば大丈夫だと思います。

一方、blockquoteタグ内に svg-inline--fa クラスが見当たりません。修正箇所に含まれていたのであれば、消してしまっていないかご確認ください。

あとは、どこかのタグを閉じ忘れたりしていると、それ以降がうまく反映されない可能性があります。

Answer 4

そのCSSはどこに書いてありますか？ 外部ファイルから読み込んでいるのだとすれば、そのファイルの指定方法に不備があるのではないでしょうか。