サポート » その他 » レスポンシブデザインがうまく嵌まらない

  • CSSに関する質問で恐縮なのですが、
    ・トップページの誘導用リンクのボックスが本文と重なってしまう。
    ・他のページで右寄せした文字が画面外に出てしまう。
    上記2点で困っています。
    スタイルシートを貼っておきます。
    よろしくご教示ください。

    
    /****************************************
    スマホ用
    ****************************************/
    @media screen and (max-width:640px){
    body .page-template-page-1 {
    	max-width:640px;
    	}
    
    /* ページヘッダー */
    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;
    	}
    ul#menu-menus {
    	width:600px;
    	border-top:solid 2px #fff;
    	height:35px;
    	border-bottom:solid 2px #fff;
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    }
    ul#menu-menus li {
    	width:100px;
    	list-style-type: none;
    	font-size:11pt;
    	text-align: center;
    	margin:auto;
    	float:left;
    }
    ul#menu-menus li a {
    	line-height: 35px;
    	color: #fff;
    }
    ul#menu-menus li a:hover {
    	color: #fff;
    	width:10px;
    	opacity:0.5;
    }
    ul#menu-menus li:last-child{
      margin-right: 0;
    }
    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;
    	position:relative;
    	margin-left:5px;
    	margin-right:5px;
    	}
    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%;
    	float:left;
    }
    .glay {
    	border:dotted 2px #696969;
    	display:block;
    	color:#696969;
    	padding:2px;
    	margin-top:10px;
    	position:absolute;
        bottom:0;
        right:0;
    }
    }
    

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • CG

    (@du-bist-der-lenz)

    スタイルシートは知りませんが、コンテナを全幅からボックスにするとか、誘導用リンクと本文の間に、スペーサーを挟んではどうでしょうか。

    誘導用リンクと本文の間に、スペーサーを挟んではどうでしょうか。

    position: absolute は絶対位置への配置なので、他の要素(この場合は p )の領域に影響を受けなくなります。よって誘導用リンクと本文の間にスペースを挟んでも重なります。領域自体を広げなければなりません。position: absolute を使用しない方法(HTML の変更が必要)で対応されたほうがいいかと思います。
    なお、WordPress というより HTML+CSS についてのご質問に見受けられます。このフォーラムは WordPress のフォーラムです。他のフォーラムなどの方が回答が得やすいと思います。

    他のページで右寄せした文字が画面外に出てしまう。

    こちらは、下記スタイルを追加してみてください。

    #main {
    	display: block;
    }
    #main-1 {
    	width: 100%;
    }

    トップページは、style.css の 393 行目を
    bottom: -20px;
    としてください。

    下層ページは、#main-1@media screen and (max-width:640px){ のメディアクエリの中で

    #main-1 {
        max-width: 100%;
        width: 100%;
    }

    としてください。
    ちょっとずれているので、369行目~370行目の margin を以下のように変えてください。

    	padding-left: 5px;
    	padding-right: 5px;
    	box-sizing: border-box;

    これ以上は、他で聞かれた方が良いかと思います。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「レスポンシブデザインがうまく嵌まらない」には新たに返信することはできません。