-
ID:uG/exr さんの質問

只今ワードプレスにてランディングページを作成中です。

http://sskproduct.com/travel-bottle/

こちらのグレーの「なぜ無料で提供するのか?」
の部分なのですが、

■左側に余白ができてしまう
■三角形が中央からずれてしまう
■三角形をもう少し大きくしたい
以上の三点で困っております。

↓CSSでこのように入力しております。↓

h2{
width: 100vw;
background-color:#a7a7a7;
  font-size: 15px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
position: relative;
}

h2:before{
content: "";
border: 12px solid transparent;
border-top: 12px solid #a7a7a7;
position: absolute;
right: 30%;
bottom: -23px;
}
h2:after{
content: "";
border: 12px solid transparent;
border-top: 12px solid #a7a7a7;
position: absolute;
right: 30%;
bottom: -24px;
}

お分かりの方、ご返答を頂ければ幸いです。

みんなの回答 4 件

ID:Qare7k さんの回答

#mainのpaddingを見ろ

ID:e/MUrz さんの回答

CSSの何が原因か分からなければ、外部読み込みCSSを1個づつ削除⇒原因となるCSSファイル絞込み⇒原因となるCSSファイル5000行だとしたら上半分2500行削除⇒以下絞込み作業を繰り返し、で絞り込んでいけ。悩む暇があったら手を動かしつつ、ChromeのDeveloperTools使え。

ID:uG/exr

ありがとうございます!頑張ります><

ID:uG/exr さんの回答

【補足】
Qare7kDOe/67様ご回答ありがとうございます!!
こちらavadaにて作成しているのですが
パディングは、このようなかんじで0にしているのですが・・
余白がまだ残っていて困っています。

ID:Qare7k

style.cssにも#mainがあるよ

ID:uG/exr

本当ですね!
ありがとうございます!!

ID:xVs/Ve さんの回答

h2のwidth:100vwは必要ない、もしくは100%にする
vwは画面分のwidthって意味だから左に余白がある分はみ出るぞ

h2:beforeとh2:after両方同じ吹き出し用に見えるので2つある意味がよく分からないけど、どっちか消して right: 50% ; にする
大きさはborder-topとborderをいじりそれに合わせてbottomもいじれ

ID:uG/exr

大感謝です( ノД`)
ありがとうございました!!

ID:xVs/Ve

上の人も言ってるけどchromeのDeveloperTools使えるようになればこういう問題はすぐ分かるようになる。
ちなみに今のままだと縮小すると吹き出しズレるから right: calc( 50% -50px ) ; が正しかった。

ID:uG/exr

DeveloperTool、使いこなせるようしたいと思います><
right: calc( 50% -50px )だと、
三角が右にずれてしまいました、なぜでしょう?( ノД`)
ご丁寧なご説明で本当に感謝しています!!

ID:xVs/Ve

calc( 50% -50px )ではなくcalc( 50% - 50px )だった。
スペースがないせいで適用されてない。

ID:uG/exr

今までスペースはあまり関係ないと思っていました。
ありがとうございました!!!( ノД`)

最終更新日:2016-09-02 (1,269 views)

関連するトピックス

ページ上部に戻る