Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）
###ワードプレステーマ SydneyでWebサイトを作成しています。
初心者で申し訳ございません。質問させて頂きます。
Sydneyが指定している各Media Queryに合わせて、div.row内のブロック要素div#primary.content-area.col-md-9をdiv.rowの上下左右中央揃えをするにはどうしたらよいですか？
###発生している問題
Media Queryのmin-width: 991px以上は下記のコードで対応できそうなのですが、widthが990px以下だと画面左に過剰な余白が出てしまいます。
また、記入したcssの問題なのか、div#primary.content-area.col-md-9のテキストが綺麗に折り返されません。
###該当のソースコード(CSS)
-------------------------------------------------------------- */ @media only screen and (min-width: 1930px) { .parallax { background-size: cover; } } /* Smaller than standard 1200 */ @media only screen and (max-width: 1199px) { .roll-icon-list .list-item { margin-bottom: 18px; } .roll-project.fullwidth .project-item { width: 25%; } .masonry-layout .hentry { width: 455px; } }
/* Smaller than standard 980 */ @media only screen and (max-width: 991px) { .site-header.fixed { position: static !important; } .parallax { background-size: cover; background-attachment: scroll; background-position: top center!important; } .roll-counter .numb-count { font-size: 24px; } .masonry-layout .hentry { width: 345px; } .header-wrap .col-md-8 { padding: 0; } .last { margin-bottom: 0 !important; } .margin-bottom-device { margin-bottom: 50px; } .margin-top-device { margin-top: 50px; } .content-area .post-wrap, .contact-form-wrap { padding-right: 0; } .contact-form-aside, .sidebar { margin-top: 50px; } .roll-icon-box { margin-bottom: 30px; } .roll-promobox.aside-style, .roll-promobox.aside-style .promo-wrap, .roll-promobox.aside-style .promo-content, .roll-promobox.aside-style .promo-controls { display: block; text-align: center; width: 100%; } .roll-promobox.aside-style .title { margin-bottom: 20px; } .roll-project.fullwidth .project-item { width: 33.3%; } .footer-widgets .widget { margin-bottom: 50px; } .text-slider-stopped { top: 70%; } } @media only screen and (max-width: 1024px) { .slides-container .slide-item, .panel-row-style { background-attachment: scroll; background-position: center !important; } .panel-row-style.mob-pad-0 { padding: 0 !important; } .panel-row-style.mob-pad-15 { padding: 15px 0 !important; } .panel-row-style.mob-pad-30 { padding: 30px 0 !important; } .panel-row-style.mob-pad-45 { padding: 45px 0 !important; } #mainnav { display: none; } .btn-menu { display: block; } .site-header { position: static; background-color: rgba(0,0,0,0.9); } .posts-navigation { overflow: hidden; margin-bottom: 30px; } } @media only screen and (max-width: 780px) { .roll-client .client-item img { max-width: 100%; } .panel-grid-cell { padding-left:15px !important; padding-right:15px !important; margin-bottom: 15px !important; } h1 { font-size: 32px;} h2 { font-size: 28px;} h3 { font-size: 22px;} h4 { font-size: 18px;} h5 { font-size: 16px;} h6 { font-size: 14px;} }
/* Tablet Landscape */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax { background-size: cover; background-attachment: scroll; background-position: top center!important; } }
/* All Mobile Sizes */ @media only screen and (max-width: 767px) { .posts-layout { max-width: 100%; } .masonry-layout .hentry { width: 100%; margin: 0 0 30px; padding: 0 15px; } .text-slider-section { min-height: 190px; } .text-slider .maintitle { font-size: 32px; line-height: 1.1; padding-bottom: 10px; } .text-slider .subtitle { font-size: 16px; line-height: 24px; padding: 15px 0; } .roll-button { padding: 10px 30px; } .roll-project .project-item { width: 100%; } .roll-project.fullwidth .project-item { width: 50%; } .roll-counter { margin-bottom: 50px; } .single-post .author-post .author-avatar { float: none; margin-bottom: 20px; } .single-post .author-post .author-info { margin-left: 0; padding: 0; } .single-post .author-post ul.socials { position: static; } .single-post .author-post .intro { clear: left; padding-top: 10px; } .comment-list .children { margin-left: 75px; } .error-wrap .error-search { padding: 0 20px; } .aside-image .content-wrap { padding-left: 0; padding-right: 0; } .social-menu-widget a:before { font-size: 42px; } .btn-menu { float: none; margin: 15px auto 0; } .header-wrap { text-align: center; } #mainnav-mobi { top: auto; } .site-header.float-header { padding-top: 20px; padding-bottom: 20px; } .text-slider-section { min-height: 0; top: auto; bottom: 0; } .site-title { font-size: 22px !important; } }
/* Mobile Portrait Size */ @media only screen and (max-width: 479px) { .roll-project.fullwidth .project-item { width: 100%; } .blog-post, .service, .sidebar-column { padding: 0; } .roll-button { font-size: 12px; } .text-slider .maintitle { font-size: 20px; } .text-slider .subtitle { font-size: 14px; } .text-slider { margin-bottom: 15px; } } @media only screen and (max-width: 320px) { .text-slider { margin-bottom: 0; } } /* 追加css */ .col-md-9 { position: relative; top: 25%; right: 0; bottom: 25%; left: 20%; width: auto; height: auto; }
該当のコードです。 (html)
<div id="content" class="page-wrap"> <div class="container content-wrapper"> <div class="row"> <div id="primary" class="content-area col-md-9"> <main id="main" class="post-wrap" role="main"> <article id="post-5" class="post-5 page type-page status-publish hentry"> <header class="entry-header"> <h1 class="title-post">動画制作事業</h1> </header><!-- .entry-header --> <div class="entry-content"> <h3><span style="color: #ffffff;">コンセプトの策定からやらせていただきます。</span></h3> <p><span style="color: #ffffff;">弊社は県内随一の夜間撮影能力を持っています。</span><br> <span style="color: #ffffff;"> もちろん明るい場所での撮影も可能です。</span></p> <p><span style="color: #ffffff;">TVCMからyoutube等のネット広告、更には社内や学内に配る動画作品まで</span><br> <span style="color: #ffffff;"> 動画であれば何でもやらせていただきます。</span></p> <p><div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe src="https://www.youtube.com/embed/smbmxL04-xs" frameborder="0" allowfullscreen="allowfullscreen" id="fitvid701968"></iframe></div></p> <p><div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe src="https://www.youtube.com/embed/7dlBP-Y9QuI" frameborder="0" allowfullscreen="allowfullscreen" id="fitvid921242"></iframe></div></p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="edit-link"><a class="post-edit-link" href="http://mimic339.com/wp-admin/post.php?post=5&action=edit">編集</a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> </main><!-- #main --> </div><!-- #primary --> </div> </div> </div>
###試したこと
上記css末尾に,こちらを記入してみました。
position: relative; top: 25%; right: 0; bottom: 25%; left: 20%; width: auto; height: auto; }``` また、floatさせright指定もしてみましたが、上記問題のように左側に余白が過剰にできてしまいました。 ###補足情報(言語/FW/ツール等のバージョンなど) cssなどの記入は善意の方のwebサイトを参考に色々試しましたが、うまくいっていません。 どうかご教授願います。 こちらが[デモサイト](http://demo.athemes.com/sydney/)です。 こちらが[ダウンロード先](http://athemes.com/theme/sydney/#)です。 こちらが[問題の画像１](https://gyazo.com/0925dcea87fd7e73d8c96357270ae32d)、[画像２](http://https://gyazo.com/46de60bb6c23669fb6ca102c834009ff)、[画像3です。](https://gyazo.com/89ae70c7e3c5caf9b30da433fac026c2)
デモサイトには「col-md-9」が使用されていません。具体的にHTMLを提示され、どの部分か画像で示すなどされるほうが良いと思います。
追加ありがとうございます。ただ画像のリンクが切れているようです。teratailに画像を投稿する事もできますので、そちらの機能を使用していただけませんか？ あと、「@media」ごとに分割するとかえって読みにくいですよ。
回答1件
0
ベストアンサー
left: 20%; をメディアクエリで変更すればよいです。また、.col-md-9 より div#primary.content-area に CSS を当てたほうが良いです。
投稿2017/04/11 17:53
総合スコア69398
あなたの回答
tips
プレビュー
