質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.46%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

527閲覧

PCでは問題なく表示されるが、実際のスマホだと崩れる

trgtgshrthrt

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/05/24 07:58

編集2021/05/25 10:13
<a class="button contact-btn" href="https://r-management.jp/security/forum20210715/contact/">お申し込みはこちら</a> <!--申し込み--> <div class="mx-auto px-4 py-4 container contact-content"> <h4 class="text-center">無料フォーラム・LIVE配信に申し込む</h4> <div class="contact-boxes row" style="background:#EFEFEF;"> <div class="contact-box text-center col-md-6" style="background:#EFEFEF; align-items: center;"> <p><span class="blue-paragraph">お電話でもお気軽にお問い合わせください</span><br> <span class="phone"><strong><i class="fas fa-phone" style="color:lightskyblue;"></i> 090-9100-0793</strong></span><br> (平日10:00〜18:00)</p> <p class="contact-info">担当:高久(タカク)</p> </div> <div class="col-md-6 text-center contact-box" style="background:#fff; "> <p class="blue-paragraph">申込やメールでのお問い合わせはこちら</p> <a href="https://r-management.jp/security/forum20210715/contact/" class="contact-red-btn">申し込む</a> <p class="contact-info">メールアドレス:info@r-management.jp</p> </div> </div> <p class="text-center" style="padding:10px;"><span style="background:#333; color:#fff; padding:5px;">開催日</span> 2021年7月15日木曜 9:20~17:20</p> </div> <!-- <p class="contact-p"><br>オンライン配信のみ</p> --> </div> コード ```![イメージ説明](9d510c2f346d4f831af1baeb89d0f742.png)### 前提・実現したいこと スマホのレスポンシブ対応して、綺麗にしたい ### 発生している問題・エラーメッセージ https://r-management.jp/security/forum20210715/ https://r-management.jp/work_style_reform/forum20210713/ これらのサイトの「無料フォーラム・LIVE配信に申し込む」の部分が、PCの開発ツールでは問題なく表示されるのですが、実際にスマホの横画面にすると謎の空白が出来てしまいます。 ### 試したこと 検証ツール左上のレスポンシブ確認のにあるスマホの種類すべて試しましたが 問題はありませんでした。しかし、実際に自分のスマホでは崩れているため、どこに問題があるかわからず、いろいろ検索してみましたが、解決しませんでした。クライアントに https://r-management.jp/security/forum20210408/ これなら崩れいないからそれを参考にしろといわれましたが、違いが分かりません

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

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

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

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

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

K_3578

2021/05/24 08:07

とりあえずその崩れている画像と、ソースコードを提示してください。 貴方の環境を横で見ている訳じゃないので、質問文に書いてある以上のことは 他のユーザーには分かりません。
退会済みユーザー

退会済みユーザー

2021/05/24 08:55

PCであっても、ブラウザの機能でレスポンシブデザインを確認するツールがありますが、それでは再現しないのですか?
trgtgshrthrt

2021/05/24 09:12

検証ツールに左上のボタンなら試しました。
退会済みユーザー

退会済みユーザー

2021/05/24 09:17

その試した内容を、質問文中に追記してください。スマホっていろんな画面幅があるので、試した範囲が足りていない可能性もありますし。
mari.rinn

2021/05/25 04:56

この画像を拝見すると、電話番号とかが書いてある部分の要素が明らかにはみ出してますよね? つまりこの要素のwidthが外枠に比べてデカいサイズ指定されてるんだと思いますが、直接htmlタグにstyleを書かれてるものが多いですが、CSSは使われていないのですか?
trgtgshrthrt

2021/05/25 10:11

元になったサイトの文言を変えたり、色を変えたりしただけなので、CSSはそのまま使用しています。 ちなみに元のサイトも崩れていました。
guest

回答2

0

ベストアンサー

同じ現象かどうか分かりませんが、たとえば、ビューポートの幅が766pxの場合、左側のみに余白が出るようです。

イメージ説明

これに関しては、.contact-contentwidth:870pxに問題がありそうですね(上図に見えている、522.cssのL557)。

あと、@media (max-width: 767px)@media (min-width: 767px)が混在してますが、幅が767pxの場合、どちらも適用されてしまうのでご注意ください(それが意図したものなら問題ないです)。

投稿2021/05/25 05:34

gpsoft

総合スコア1323

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

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

trgtgshrthrt

2021/05/25 10:10

widthを消去してみたんですが、全く変わりませんでした。 クライアントから https://r-management.jp/security/forum20210408/ のサイトだったら崩れていないからそれを参考にしてくれって言われたんですが違いが全く分かりません
gpsoft

2021/05/25 13:49

残念、別の現象みたいですね。 たしか、実機のchromeとPCのdev toolsをadb経由で接続する方法があったと思うので、私ならそれで調べます。接続方法はググれば見つかると思います。
guest

0

幅が伸びている部分では、下記のクラスが使われていますね。

contact-boxes
row
contact-box
text-center
col-md-6
blue-paragraph
phone
contact-info
contact-red-btn

この中のどれかが影響しているはずですので、怪しそうなのから外してみて、犯人を探してみるしかないかなと思います。

ちょっと外してはテスト環境にアップロードして実機でテスト、というのを繰り返す、地味な作業になりますが、がんばってください。

投稿2021/05/25 13:00

itagagaki

総合スコア8402

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問