🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

1回答

422閲覧

WPでレスポンシブ対応を可能にしたい

ftakaharu

総合スコア0

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2020/12/18 01:42

前提・実現したいこと

WordPressを使っている初心者です
レスポンシブ対応を可能にしたい

発生している問題・エラーメッセージ

1部のページ(投稿ページ)がモバイル対応できていない 横の余白や縦の幅が異常(PCバージョンのまま) しかし、トップページはなぜかレスポンシブができている

該当のページ

投稿ページ https://andd.live/2957/canva/ 自身のケータイで入ってみて状況を確認してみてもらえればと思います ついでにトップページも見てもらえればレシポンシブになってルのがわかると思います

試したこと

<meta name="viewport" content="width=device-width, initial-scale=1"> を入れての対応はした しかし効果なし、下記のコードがどういう対応できているかわからない なぜならトップページはこれでレスポンシブができているから 他のありえそうな原因があれば教えて頂きたいです。 @media (max-width: 769px){ .post_content section > img { margin: 1em -15px 0 -15px; max-width: calc(100% + 30px)!important; }

.post-element .product-link-button.upside {
display: none;
}
.post-element .product-link-button {
border-right: 0;
border-bottom: 0;
border-left: 0;
}
.post-element .product-link-button.downside {
display: block;
box-shadow: none;
}
}
@media (min-width: 770px){
.post_content section > img {
margin: 1em auto;
width: 100%;
}
.post-element.post-element-external-product .post-element-product-image-outer, .post-element.post-element-internal-product .post-element-product-image-outer {
padding: 10px 0 10px 10px;
float: left;
}
.post-element.post-element-external-product .post-element-product-text, .post-element.post-element-internal-product .post-element-product-text {
float: right;
width: 333px;
padding: 15px 10px 10px 15px;
}
}

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

responsive.cssで指定しているcssが
style.cssのcssで上書きされてるようです
cssの読み込みの順番やセレクタの詳細度など調整してください

投稿2020/12/18 02:24

KazuhiroHatano

総合スコア7819

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問