css gridを使った時に　サイト表示がなくなる

saklab
(@saklab)

4年、 6ヶ月前

wordpress に　elementor のビルドプラグインを入れて、
elementor内にHTMLボックスを配置してリスト作成をしております。

その状態で、wordpressのカスタマイズからcss追加をしているのですが、
カスタマイズ画面上ではCSSの追加でちゃんと表示できているのですが、
いざプレビューを見るとコンテンツが全く表示されていない現状です。

コードとスクショをそれぞれ記載いたします。知識のある方ご教授お願いします。
拙いコードですが、そもそもこっちの方がいいよってのもあれば教えてくださるとありがたいです。

また、gridよりもいい簡単な方法があればとも思っています。
スクショのようなリストができればなんでもいいのですが。。現状色々ググった上でgridにたどり着きました。

CSS—–

body {
margin: 0;
padding: 0;

}
.back {
position: fixed;
bottom: 10px;
right: 10px;

}
ul {
background-color:#000;
margin: 5px;
padding:0px;
}
li {
list-style: none;
width:23vw;
text-size-adjust: auto;

}

.searchList {
margin-bottom: 20px;
}
.searchList li {
display: inline-block;
}
.list {
overflow: hidden;
}

#more {
display: none;
}
.none {
display: none;
}

.container{
display: grid;
width: 100vw;
height: 25vh;
text-align:center;
grid-template-columns: 25 25 25 25;
grid-template-rows:fr1 fr1 fr1 ;
grid-template-areas:
“title dataplan talkplan price”
“simtype carrir talkapp price”

}

.plans, .data_volume, .free_talk_type{
height:15vh;}
.type, .connect_type, .talk_app{
height:8vh;
margin:0px;
}

.plans{
grid-area:title;

background-color:#f2a9aa;
}
.data_volume{
grid-area: dataplan;
background-color:#fff111;
}
.free_talk_type{
grid-area:talkplan;
background-color:#111fff;
}
.yenmonth{
grid-area: price;
background-color:#fff12a;
}
.connect_type {
grid-area: carrir;
background-color:#ffa111;
}
.type{
grid-area: simtype;
background-color:#cc77d7;}
.talk_app{
grid-area:talkapp;
background-color: #fff1d1;
}
——

html—
<!DOCTYPE html>
<html lang=”ja” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>ピッタリSIM診断</title>

<script src=”/path/to/masonry.pkgd.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script>
$(function() {
var lists = $(‘.list ul’);
$(document).on(‘change’, ‘.serchBox select’, function() {
lists.show();
for (var i = 0; i < $(‘.serchBox select’).length; i++) {
// 絞り込みの項目を取得
var item = $(‘.serchBox select’).eq(i).attr(‘name’);
// 絞り込みの対象を取得
var target = $(‘.serchBox select’).eq(i).val();

if(target != ”) {
for (var j = 0; j < lists.length; j++) {
// 絞り込み対象でない場合は非表示
if(!lists.eq(j).find(‘.’ + item).find(‘span’).hasClass(target)) {
lists.eq(j).hide();
}
};
}
};
});
});
</script>

</head>

<body>
<div class=”container”>
<header class=”header”></header>
<main class=”main”></main>
<footer class=”footer”></footer>
</div>
<div class=”serchBox”>
<label class=”search_label”>SIMタイプ
<select name=”type”>
<option value=””>未選択</option>
<option value=”data”>データのみ</option>
<option value=”talk_data”>通話+データ</option>
</select>
</label>

<label class=”search_label”>無料通話
<select name=”free_talk_type”>
<option value=””>なし</option>
<option value=”free_talk”>完全無料</option>
<option value=”10_free_talk”>10分以内無料</option>
<option value=”20_free_talk”>10分以上無料</option>
</select>
</label>
<label class=”search_label”>データ上限
<select name=”data_volume”>
<option value=””>未選択</option>
<option value=”2gb”>〜2GB</option>
<option value=”5gb”>3〜5GB</option>
<option value=”10gb”>6〜10GB</option>
<option value=”20gb”>11〜20GB</option>
<option value=”30gb”>30GB〜</option>
</select>
<label class=”search_label”>使用回線
<select name=”connect_type”>
<option value=””>未選択</option>
<option value=”au”>au回線</option>
<option value=”docomo”>DOCOMO回線</option>
<option value=”softbank”>SoftBank回線</option>
<option value=”connect_other”>その他</option>
</select>
</label>

<div class=”list”>
<ul class=”container”>
<li class=”plans”>クジラエアー
<li class=”data_volume”>データ量<br><span class=”30gb datavolume”>90GB</span>
<li class=”free_talk_type”>無料通話<br><span class=”freetalk”>なし</span>
<li class=”yenmonth”>月額４８６０円
<li class=”type”>SIMタイプ<br><span class=”data simtype”>データのみ</span>
<li class=”connect_type”><span class=”docomo connecttype”>DOCOMO回線</span>
<li class=”talk_app”>通話アプリ<span class=”””apptalk”> −</span>

<ul class=”container”>
<li class=”plans”>クジラモバイルS
<li class=”data_volume”>データ量<br><span class=”20gb datavolume”>20GB</span>
<li class=”free_talk_type”>無料通話<br><span class=”free_talk freetalk”>24時間無料</span>
<li class=”yenmonth”>月額４８６０円
<li class=”type”>SIMタイプ<br><span class=”talk_data simtype”>通話+データ</span>
<li class=”connect_type”><span class=”softbank connecttype”>SoftBank回線</span>
<li class=”talk_app”>通話アプリ<span class=”not apptalk”>なし</span>

<ul class=”container”>
<li class=”plans”>クジラモバイルD<br>+<br>クジラトーク
<li class=”data_volume”>データ量<br><span class=”30gb datavolume”>30GB</span>
<li class=”free_talk_type”>無料通話<br><span class=”10_free_talk freetalk”>10分以内無料</span>
<li class=”yenmonth”>月額５７１０円
<li class=”type”>SIMタイプ<br><span class=”talk_data simtype”>通話+データ</span>
<li class=”connect_type”><span class=”docomo connecttype”>DOCOMO回線</span>
<li class=”talk_app”>通話アプリ<span class=”must apptalk”>必須</span>

</body>
</html>
——

スクリーンショット 2019-09-27 11.09.45

ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)

DRILL LANCER
(@rickaddison7634)

4年、 6ヶ月前
とりあえず、開発者ツールで色々と検証してみることをおすすめします。

１つ言えるのは、.containerクラスは使用しているテーマ側で使用されていて、
それと競合している可能性があります。
<div id="container" class="container wrap cf">
```
.container {
    padding-right: constant(safe-area-inset-right);
    padding-left: constant(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}
```
クラスの名前を変更したほうが良さそうです。
トピック投稿者 saklab
(@saklab)

4年、 6ヶ月前

クラス名色々変えたらだいぶよくなりました！
ありがとうございます！！

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「css gridを使った時に　サイト表示がなくなる」には新たに返信することはできません。

トピックタグ

表示