スマートフォン用のメディアクエリが作動しない件について

Question

自社サイトのフッターデザインにおける配送の部分を編集しているのですが、以下のようなコードを打ち込んでもスマホ用のメディアクエリにおいてコンテンツがflex解除できず困っています。

★HTML

.example{
    display:flex;
    padding: 0px;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    color: #000000;
}



    

 

お支払方法

クレジットカード

カード決済は１回払いとなっております。



代金引換払い

お買い上げ金額に応じて別途代引き手数料を頂戴致します。

.
.
.
.

★CSSコード
@media screen and (max-width:768px) {
example{
    display: block;
    padding: 0px;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    color: #000000;
	}
}

display: blockでflexを解除しても思い通りにならない場合、どのような問題が考えられますでしょうか。

Answer

ECマスターズの田中美帆です。

> 自社サイトのフッターデザインにおける配送の部分を編集しているのですが、以下のようなコードを打ち込んでもスマホ用のメディアクエリにおいてコンテンツがflex解除できず困っています。

★CSSコード
@media screen and (max-width:768px) {
example{
display: block;
padding: 0px;
width:90%;
margin-left:auto;
margin-right:auto;
color: #000000;
}
}

上記のCSSにつきまして、
class名"example"の頭に、ピリオド（.）が
記述されておらず、CSSが適用されていない
状態ですので、修正して表示をご確認ください。

---
example
↓
.example
---


上記で解決しない場合、
プロパティを最優先させる命令の
!important;
を追加して、再度表示をご確認ください。

---
display: block;
↓
display: block !important;
---