ボックスなび スマホでの表示がうまくいかないです。

Question

前提・実現したいこと

ブラウザでは4列表示、スマホで2列表示

<div class="p-nav">
<ul>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像<span class="p-nav-title">タイトル</span></a></li>
</ul>
</div>

/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */

}/* スマホ */
@media screen and (max-width: 559px) {
	.p-nav ul li{
		-ms-flex-preferred-size: calc(100%/2);/* 2列 */
		flex-basis: calc(100%/2);/* 2列 */
	}
}

PCだとうまく表示されるのですが、スマホだと

1 リストの「・」が表示される
2 テキストにリンクの下線が表示される
3 2列に表示されない…

Bracketsというテキストエディタではうまく表示されるのですが。
会社のCMSシステムによるパソコンの操作なので色々なものが関係してるかもしれませんが、それぞれにcss などの変更は可能です。

よろしくお願いします。

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

** まずインデントはつけるようにしましょう **

リストの「・」が表示される

これはおかしいですね。
コードのどこにもlist-style: none;を上書きする指定はないので別の要素で上書きされているか、スマホでキャッシュが効いている可能性があります。

PCのデベロッパーツール（開発者ツール）でスマホのサイズにして、どこがlist-style: none;を上書きしているか調べてみてください。