Q&A
問題のある HTMLも CSSもわからない状態では回答はつかないと思います。問題のあるHTMLやCSSを質問内に記載してください。
Googleサーチコンソールでエラーがでました。内容は
「コンテンツの幅が画面の幅を超えています」というものです。
コンソール内のエラー確認ページでは、スマホだとヘッダー画像がCSSが反映されていない状態ではみ出ていました。
実際公開しているサイト上では問題なく表示されています。また、エラーが出ているページはwordpressで作成した個別記事ページの1記事で、ほかの記事ページにはエラーは出ていません。
同じ条件で制作した他の記事ページにはエラーが出ず、エラーが出たページも実際は問題なく表示されている場合、どの部分を修正すればエラーが消えるのでしょうか。
詳しい方、ご教授ください。
---------------------追記---------------------
@media screen and ( max-width:960px) {
/* 画面サイズが960px以下はここを読み込む */
/================== header ==================/
header h1 img {
width: 180px;
height: auto;
}
header .sns {
padding:0.8rem 0.5rem;
}
header .sns li {
width: 35px;
padding: 0.3rem 0 0 0.5rem;
list-style: none;
}
header {
padding: 1.3rem 1rem ;
}
#pc_nav {
display: none
}
/================== nav ==================/
header nav {
padding:1.5em;
position: absolute;
top:0;
left:0;
display: flex;
}
#nav-drawer {
position: relative;
}
/チェックボックス等は非表示に/
.nav-unshown {
display:none;
}
/アイコンのスペース/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/ハンバーガーアイコン/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/線の太さ/
width: 25px;/長さ/
border-radius: 3px;
background: #000;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/閉じる用の薄黒カバー/
#nav-close {
display: none;/はじめは隠しておく/
position: fixed;
z-index: 99;
top: 0;/全体に広がるように/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/中身/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/最前面に/
width: 90%;/右側に隙間を作る（閉じるカバーを表示）/
max-width: 330px;/最大幅（調整してください）/
height: 100%;
background: #fff;/背景色/
transition: .3s ease-in-out;/滑らかに表示/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/左に隠しておく/
}
/チェックが入ったらもろもろ表示/
#nav-input:checked ~ #nav-close {
display: block;/カバーを表示/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/中身を表示（右へスライド）/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
header nav .menu {
font-weight: bold;
font-size: 2em;
padding: 1.1em;
}
header nav li {
padding: 1em;
font-size: 1.3rem;
}
header nav a {
text-decoration: none;
color:#000;
font-weight: bold;
}
header nav .sub { display: flex; justify-content: space-between; padding: 2rem; } header nav .sub li { font-size: 0.8rem; } /*ラベル*/
.accbox label {
display: block;
cursor :pointer;
transition: all 0.5s;
}
/チェックは隠す/
.accbox input {
display: none;
}
/中身を非表示にしておく/
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.accbox .accshow p {
padding:0.4rem;
}
.accbox .accshow a {
font-size:0.9rem;
font-weight:normal;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/クリックで中身表示/
.cssacc:checked + .accshow {
height: auto;
padding: 5px;
opacity: 1;
}
/================== wrapper ==================/
/================== banner ==================/
.banner img { width: 100%; }
/================== footer ==================/
footer .sitemap li {
display: none;
}
footer .sitemap {
display: flex;
flex-wrap: wrap;
padding-top: 1rem;
}
footer .sitemap_menu {
width: 50%;
text-align: center;
padding: 0.8rem 0;
}
footer .sitemap_menu a {
color:#777676;
text-decoration:none;
}
footer .map {
width: 100%;
padding: 1rem 2rem ;
}
footer .map p {
display: none;
}
footer iframe { height: 250px; } footer .sitemap2 li { list-style: none; font-size: 0.7rem; } footer .sitemap2 li a { text-decoration: none; } footer .sitemap2_wrap { padding: 3rem 2rem; } footer .shop_deta { text-align: center; padding-bottom: 2rem; } footer .shop_deta li { padding-bottom: 0.5rem; } footer .shop_deta img { margin-bottom: 1rem; } footer .copy { text-align: center; } footer .copy ul { text-align: center; } footer .copy li { display: inline-block; }
.single .navigation {
margin-top: 4rem;
line-height: 1.6rem;
}
.description .post img { width: 100%; height: auto; } .single .entry-content img { width: 100%; height: auto; } .single h1.entry-title { text-align: center; padding:3rem 0 0.5rem 0; font-size: 5vmin; line-height:1.6rem; } .single .entry-meta { text-align: center; }
.home .entry-content {
display:none;
}
.sp_main img {
height:100vh;
}
#main_img { display: none; }
.news_area {
padding: 2rem 0 3rem 0;
}
.news_wrap {
margin: 0 auto;
padding: 0 2rem;
}
.test {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
.easy {
font-size: 6vw;
white-space: nowrap;
}
.easy_text { font-size: 0.8rem; line-height: 1.6rem; width: 75%; margin: 0 auto; } .order { padding: 2rem 1rem; } .order img { width: 80%; } .order .easy { display: none; } .inner { width: 200px; } .tel_pc { display: none; } .contact_area .tel a { text-decoration: none; color: #000; } .news_area .date { padding-right:0.5rem; } .metaslider .flexslider { margin-bottom: 0 !important; } .title { line-height:1.5rem; } .toriatukai { display: none!important; } .sp_toriatukai { padding:0 2rem 3rem 2rem; } .sp_toriatukai img { width: 100%; } .toriatukai_img { background-color:#e2e3e3; } .toriatukai_text { background-color:#e2e3e3; padding:2rem; color:#908f8f; font-size:0.8rem; text-align:center; line-height:1.3rem; } .toriatukai_text .more { margin-top:1rem; display:block; background-color:#908f8f; padding: 0.7rem 1.5rem; color: #FFF; } .toriatukai_text img { margin-bottom:0.8rem; } .toriatukai .inner .more a { text-decoration:none; color:#FFF;
}
}
キャッシュクリア後に再送信と再チェックしてみてはどうですか？
yoshinaviさん、ありがとうございます。やってみます。
CHERRYさん、お返事が遅くなり申し訳ございません。エラーが出ているページはhttps://XXXXX.com/でトップページです。エラー箇所の絞り込みすらできていないので、htmlとCSSを全て記載すると膨大な量になってしまうのですが、viewportは<meta name="viewport" content="width=device-width, user-scalable=1">と記載しています。
あなたの回答
tips
プレビュー
