【タスク】
スマホ表示の場合、削除ボタンがずれてしまうので、そこを修正する。
最初はjQueryのクリックイベントかなと難しく考えてしまったが、CSSのpositionプロパティが使えるとのこと。
【positionプロパティメソッド】
親要素に position: relative;をつける、そして子要素に position: absolute;
をつけることで親要素の下に子要素を持ってくることができる。
【探し方】
親要素はHTMLのデバッカーで場所を特定した。
【実際のコード】
//親要素
@media only screen and (max-width: 768px){
div#template, div.extra {
background: #EEEEEE;
padding: 15px 30px 20px 30px;
border-radius: 5px;
margin-bottom: 30px;
position: relative;
}
//子要素 削除ボタン
.delete{
position:absolute;
bottom:10px;
right:0;
border:none;
padding:0;
left: 0; //左端から０pxなので、左寄せということ
bottom: -1px; //親要素から-1px下になるということ
width: 50px; //ボタンの幅
margin-left: 30px;
margin-bottom: 8px;
}
【困った点】
今回、最後に幅が修正できなかった。それは別の場所でclass deleteがimportantで幅が指定されており、表示の修整ができないようになっていたため。
importantから.deleteを外して、@mediaの中で.deleteの幅を指定すると表示を変更することができた。
表示を変更できない場合に、どこかで指定している気がすると探った結果、変更することができてよかった。