webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

rwd 2 column layout その3

  • 全く同じ手順で、スマホ用。767pxが、ブレイクポイント。
  • overflow: inherit;がなにもしないデフォルトの状態。

@media screen and (max-width: 767px){

#container{
width: 98%;
padding: 1%;
}
#header{
margin-bottom: 1%;
}
#nav{
margin-bottom: 1%;
}
#wrapper{
overflow: inherit;
margin-bottom: 0;
}
#main{
width: 100%;/*#mainと#sideで併せて930pxにする。間が10px*/
float: none;
margin-bottom: 1%;
}
#side{
width: 100%;
float: none;
margin-bottom: 1%;
}
#footer{
}
}

 

f:id:ohta-felica:20160525233639p:plain