こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

WordPress レスポンシブテーマのCSS

http://atsumare.wp.xdomain.jp/
上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。
クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。
下記のものがスマホ用スタイルシートです。
/****************************************
スマホ用
****************************************/
@media screen and (max-width:640px){
#main-1 {
max-width: 100%;
width: 100%;
}

/* ページヘッダー */
body.home header {
background-size:cover;
background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg");
width:100%;
height:200px;
}
header img{
background-size:cover;
display:inline-block;
margin-left:auto;
margin-right:auto;
}
h1 {
position:absolute;
top:0;
left:0;
margin-left:50px;
margin-top:100px;
color:#fff;
font-size:24pt;
}
header img {
background-size:cover;
/*width:640px;
height:200px; */
}
.right-dw {
display:inline-block;
position:relative;
width:100%;
float:left;
}
header nav {
display: none;
}
/* コンテンツエリア */
article {
width:100%;
display:block;
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
}
img {
max-width:100%;
height:auto;
margin: 5px 5px 5px 5px;
float:left;
background-size:cover;
}
.right-dw {
clear:both;
display:block;
position:relative;
width:100%;
height:auto;
float:left;
}
.glay {
border:dotted 2px #696969;
display:block;
color:#696969;
padding:2px;
margin:15px 15px 15px 15px;
position:absolute;
}
/* フッターエリア */
footer {
max-width:100%;
width:500px;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.footer {
width:130px;
display:inline-block;
text-align:left;
color: #000;
font-size: 10pt;
margin-left:auto;
margin-right:auto;
}
small {
font-size:10pt;
}
}

どなたかご教示ください。

投稿日時 - 2019-10-04 12:26:52

QNo.9663556

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

CSSを下記のように変更することで食い込まないようになります

.right-dwについて
 display を inline-block -> block に変更
 float を削除

.glayについて
 position を absolute -> relative に変更

新たに下記を追加
.right-dw > a {
display: inline-block;
float: right;
}

投稿日時 - 2019-10-04 13:04:19

あなたにオススメの質問