<i>タグにpaddingを設定していますが、親の背景ピンクが下記画像のように不十分になる時があります。
それは、F5を押したりデバイス別表示画面を変更するとたまになります。
一旦デべロッパーツールでpaddingサイズを変更してまた元に戻すときはきちんと表示されます。
アイコンはfontawsomeを使用していますが、これが読み込み遅い時とかに起こるのでしょうか、、
解決法あれば、ぜひご教授お願い致します。
HTML
<body class="second"> <header class="top"> </header> <div class="content first"> <!-- reaction --> <div class="formWrap"> <form action="URL" name="form" method="get" value='default' > <div class="button"> <input id="heart" type="radio" name="select" value="heart" onclick="reaction()" > <label for="heart" class="heart outline"><i class="far fa-heart"></i></label> </div> </form> </div> </div> </body>
CSS
.formWrap { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } input[type=radio] { display: none; } .heart{ background: #f092b1; color: #fff; font-size: calc(3rem + ((8vw - 0.64rem) * 0.7143)); border-radius: 50%; width: unset; height: unset; display: inline-block; position: relative; } .button i{ position: relative; padding: 10%; transform: unset; top: unset; left: unset; font-size: calc(10.5rem + ((58vw - 0.64rem) * 0.7143)); }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。