Q&A
崩れてしまう、という状況のスクショに、例えば赤入れしてここをこうしたい、など図示してもらえますか？
リンク内容
今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。
本来ならこうなるはずが
下のようになります。
ここに言語を入力
html CSS
コード
以下問題のコードになります。
<body class="body2"> <div class="invi"> <div class="container"> <div class="row"> <div class="col-md-12 col-xs-12"> <div class="back10"> <div class="back20"> <p class="p50"> Webデザインを通して人と人とをつなぎ、想いや価値を届けるお手伝いをしたいと考えています。 </p> </div> </div> CSS .p50{ width: 45%; height: 70%; font-size: 20px; line-height: 40px; writing-mode: vertical-rl; text-orientation: upright; font-family: 'SimSun'; z-index: 10; margin-top: -25%; color: #ffffff; z-index: 3; display : inline-block; letter-spacing : 4px; /* 文字間 */ text-shadow : 2px 2px 1px #669999, -2px 2px 1px #669999, 2px -2px 1px #669999, -2px -2px 1px #669999, 2px 0px 1px #669999, 0px 2px 1px #669999, -2px 0px 1px #669999, 0px -2px 1px #669999; /* 文字の影 */ } .back20{ position: absolute; margin-left: 30%; margin-top: -15%; }
本来こうなるはずが
下のようになります。
以下問題のコードです。
<form method="POST" action="mailto:@gmail.com"> <div class="form1"> <div> <input type="text" name="name" class="form2"> </div> <div> <input type="email" name="mail" class="form3"> </div> <input type="submit" name="送信" value="Submit" class="submit"> </div> </form> .form1{ width: 70%; margin-left: 15%; margin-top: 60px; } .form2{ width: 80%; border-radius: 5px; outline: none; border: solid 1px; } .form3{ width: 80%; margin-bottom: 50px; margin-top: 50px; border-radius: 5px; outline: none; border: solid 1px; } .submit{ width: 50%; border-radius: 5px; outline: none; border: solid 1px; color: #ffffff; font-family: 'SimSun'; background-color: #669999; margin-left: 85%; margin-top: -10%; font-size: 20px; }
本来こうなるはずが
下のようになります。
以下問題のコードです。
<div class="back1"> <p class="p5">~準備中です~</p> </div> .p5{ font-size: 30px; margin-top: 50px; margin-bottom: 40px; font-weight: bold; font-family: cursive; display: block; width: 100%; text-align: center; } .back1{ width: 70%; height: 10%; margin-left: 15%; background-color: #ffff99; border-radius: 8px; }
コードはマークダウンのcode機能にてご提示ください
スマホしかないため写真は後ほど貼ります。申し訳ありません。
回答2件
0
自己解決
文字を画像に入れるなど加工をし、フォームのhtml、CSSを改変し解決致しました。失礼致しました。ありがとうございました。
投稿2021/01/07 03:18
総合スコア1
0
せめてサイトの崩れる部分のコードを載せていただけませんか？
投稿2021/01/04 15:36
総合スコア11
失礼致しました。
全ては載せきれないので
崩れてしまう部分に限定するとこちらです。
1点目がこちらです
<body class="body2">
<div class="invi">
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="back10">
<div class="back20">
<p class="p50">
Webデザインを通して人と人とをつなぎ、想いや価値を届けるお手伝いをしたいと考えています。
</p>
</div>
</div>
CSS
.p50{
width: 45%;
height: 70%;
font-size: 20px;
line-height: 40px;
writing-mode: vertical-rl;
text-orientation: upright;
font-family: 'SimSun';
z-index: 10;
margin-top: -25%;
color: #ffffff;
z-index: 3;
display : inline-block;
letter-spacing : 4px; /* 文字間 */
text-shadow :
2px 2px 1px #669999,
-2px 2px 1px #669999,
2px -2px 1px #669999,
-2px -2px 1px #669999,
2px 0px 1px #669999,
0px 2px 1px #669999,
-2px 0px 1px #669999,
0px -2px 1px #669999; /* 文字の影 */
}
.back20{
position: absolute;
margin-left: 30%;
margin-top: -15%;
}
2点目がこちらです
<form method="POST" action="mailto:@gmail.com">
<div class="form1">
<div>
<input type="text" name="name"
class="form2">
</div>
<div>
<input type="email" name="mail"
class="form3">
</div>
<input type="submit" name="送信"
value="Submit" class="submit">
</div>
</form>
.form1{
width: 70%;
margin-left: 15%;
margin-top: 60px;
}
.form2{
width: 80%;
border-radius: 5px;
outline: none;
border: solid 1px;
}
.form3{
width: 80%;
margin-bottom: 50px;
margin-top: 50px;
border-radius: 5px;
outline: none;
border: solid 1px;
}
.submit{
width: 50%;
border-radius: 5px;
outline: none;
border: solid 1px;
color: #ffffff;
font-family: 'SimSun';
background-color: #669999;
margin-left: 85%;
margin-top: -10%;
font-size: 20px;
}
3つ目がこちらです
<div class="back1">
<p class="p5">~準備中です~</p> </div>
.p5{
font-size: 30px;
margin-top: 50px;
margin-bottom: 40px;
font-weight: bold;
font-family: cursive;
display: block;
width: 100%;
text-align: center;
}
.back1{
width: 70%;
height: 10%;
margin-left: 15%;
background-color: #ffff99;
border-radius: 8px;
}
Ngtさん >
これは回答ではないので、質問修正依頼機能でやるべき内容なので、
不適切になります。
質問者さん >
コードは質問本文に載せましょう。
質問は修正可能です。
失礼致しました。
載せ直しました。
あなたの回答
tips
プレビュー
