質問編集履歴
5
本当に丁寧にありがとうございます。これでいかがですか？
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
|
-
|
|
31
|
+
```
|
|
32
|
-
|
|
32
|
+
/* Smaller than standard 980 */
|
|
33
33
|
@media only screen and (max-width: 991px) {
|
|
34
34
|
.site-header.fixed {
|
|
35
35
|
position: static !important;
|
|
@@ -89,8 +89,6 @@
|
|
|
89
89
|
top: 70%;
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
```
|
|
93
|
-
```
|
|
94
92
|
@media only screen and (max-width: 1024px) {
|
|
95
93
|
.slides-container .slide-item,
|
|
96
94
|
.panel-row-style {
|
|
@@ -124,8 +122,6 @@
|
|
|
124
122
|
margin-bottom: 30px;
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
|
-
```
|
|
128
|
-
```
|
|
129
125
|
@media only screen and (max-width: 780px) {
|
|
130
126
|
.roll-client .client-item img {
|
|
131
127
|
max-width: 100%;
|
|
@@ -153,7 +149,8 @@
|
|
|
153
149
|
}
|
|
154
150
|
}
|
|
155
151
|
```
|
|
152
|
+
```
|
|
156
|
-
|
|
153
|
+
/* All Mobile Sizes */
|
|
157
154
|
@media only screen and (max-width: 767px) {
|
|
158
155
|
.posts-layout {
|
|
159
156
|
max-width: 100%;
|
|
@@ -265,13 +262,23 @@
|
|
|
265
262
|
margin-bottom: 15px;
|
|
266
263
|
}
|
|
267
264
|
}
|
|
268
|
-
```
|
|
269
|
-
```
|
|
270
265
|
@media only screen and (max-width: 320px) {
|
|
271
266
|
.text-slider {
|
|
272
267
|
margin-bottom: 0;
|
|
273
268
|
}
|
|
274
269
|
}
|
|
270
|
+
/* 追加css */
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
.col-md-9 {
|
|
274
|
+
position: relative;
|
|
275
|
+
top: 25%;
|
|
276
|
+
right: 0;
|
|
277
|
+
bottom: 25%;
|
|
278
|
+
left: 20%;
|
|
279
|
+
width: auto;
|
|
280
|
+
height: auto;
|
|
281
|
+
}
|
|
275
282
|
```
|
|
276
283
|
該当のコードです。 (html)
|
|
277
284
|
```
|
|
@@ -312,7 +319,7 @@
|
|
|
312
319
|
```
|
|
313
320
|
|
|
314
321
|
###試したこと
|
|
315
|
-
上記css
|
|
322
|
+
上記css末尾に,こちらを記入してみました。
|
|
316
323
|
```.col-md-9 {
|
|
317
324
|
position: relative;
|
|
318
325
|
top: 25%;
|
|
@@ -330,4 +337,4 @@
|
|
|
330
337
|
どうかご教授願います。
|
|
331
338
|
こちらが[デモサイト](http://demo.athemes.com/sydney/)です。
|
|
332
339
|
こちらが[ダウンロード先](http://athemes.com/theme/sydney/#)です。
|
|
333
|
-
こちらが[問題の画像](http://https://
|
|
340
|
+
こちらが[問題の画像１](https://gyazo.com/0925dcea87fd7e73d8c96357270ae32d)、[画像２](http://https://gyazo.com/46de60bb6c23669fb6ca102c834009ff)、[画像3です。](https://gyazo.com/89ae70c7e3c5caf9b30da433fac026c2)
|
4
何卒よろしくお願いいたします。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Media Queryのmin-width: 991px以上は下記のコードで対応できそうなのですが、widthが990px以下だと画面左に過剰な余白が出てしまいます。
|
|
7
7
|
また、記入したcssの問題なのか、div#primary.content-area.col-md-9のテキストが綺麗に折り返されません。
|
|
8
8
|
|
|
9
|
-
###該当のソースコード
|
|
9
|
+
###該当のソースコード(CSS)
|
|
10
10
|
```/* Media Queries
|
|
11
11
|
-------------------------------------------------------------- */
|
|
12
12
|
@media only screen and (min-width: 1930px) {
|
|
@@ -273,7 +273,44 @@
|
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
```
|
|
276
|
+
該当のコードです。 (html)
|
|
277
|
+
```
|
|
278
|
+
<div id="content" class="page-wrap">
|
|
279
|
+
<div class="container content-wrapper">
|
|
280
|
+
<div class="row">
|
|
281
|
+
<div id="primary" class="content-area col-md-9">
|
|
282
|
+
<main id="main" class="post-wrap" role="main">
|
|
276
283
|
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
<article id="post-5" class="post-5 page type-page status-publish hentry">
|
|
287
|
+
<header class="entry-header">
|
|
288
|
+
<h1 class="title-post">動画制作事業</h1> </header><!-- .entry-header -->
|
|
289
|
+
|
|
290
|
+
<div class="entry-content">
|
|
291
|
+
<h3><span style="color: #ffffff;">コンセプトの策定からやらせていただきます。</span></h3>
|
|
292
|
+
<p><span style="color: #ffffff;">弊社は県内随一の夜間撮影能力を持っています。</span><br>
|
|
293
|
+
<span style="color: #ffffff;"> もちろん明るい場所での撮影も可能です。</span></p>
|
|
294
|
+
<p><span style="color: #ffffff;">TVCMからyoutube等のネット広告、更には社内や学内に配る動画作品まで</span><br>
|
|
295
|
+
<span style="color: #ffffff;"> 動画であれば何でもやらせていただきます。</span></p>
|
|
296
|
+
<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>
|
|
297
|
+
<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>
|
|
298
|
+
</div><!-- .entry-content -->
|
|
299
|
+
|
|
300
|
+
<footer class="entry-footer">
|
|
301
|
+
<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 -->
|
|
302
|
+
</article><!-- #post-## -->
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
</main><!-- #main -->
|
|
307
|
+
</div><!-- #primary -->
|
|
308
|
+
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
```
|
|
313
|
+
|
|
277
314
|
###試したこと
|
|
278
315
|
上記cssの後に,こちらを記入してみました。
|
|
279
316
|
```.col-md-9 {
|
|
@@ -292,4 +329,5 @@
|
|
|
292
329
|
cssなどの記入は善意の方のwebサイトを参考に色々試しましたが、うまくいっていません。
|
|
293
330
|
どうかご教授願います。
|
|
294
331
|
こちらが[デモサイト](http://demo.athemes.com/sydney/)です。
|
|
295
|
-
こちらが[ダウンロード先](http://athemes.com/theme/sydney/#)です。
|
|
332
|
+
こちらが[ダウンロード先](http://athemes.com/theme/sydney/#)です。
|
|
333
|
+
こちらが[問題の画像](http://https://i.gyazo.com/0925dcea87fd7e73d8c96357270ae32d.png)です。
|
3
なんども申し訳ございません。ご指摘いただいた点再度訂正いたしました。どうかよろしくお願いいたします。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,9 +26,10 @@
|
|
|
26
26
|
.masonry-layout .hentry {
|
|
27
27
|
width: 455px;
|
|
28
28
|
}
|
|
29
|
-
}
|
|
29
|
+
}
|
|
30
30
|
```
|
|
31
|
+
|
|
31
|
-
/* Smaller than standard 980 */
|
|
32
|
+
```/* Smaller than standard 980 */
|
|
32
33
|
@media only screen and (max-width: 991px) {
|
|
33
34
|
.site-header.fixed {
|
|
34
35
|
position: static !important;
|
|
@@ -87,8 +88,9 @@
|
|
|
87
88
|
.text-slider-stopped {
|
|
88
89
|
top: 70%;
|
|
89
90
|
}
|
|
90
|
-
}
|
|
91
|
+
}
|
|
91
92
|
```
|
|
93
|
+
```
|
|
92
94
|
@media only screen and (max-width: 1024px) {
|
|
93
95
|
.slides-container .slide-item,
|
|
94
96
|
.panel-row-style {
|
|
@@ -121,8 +123,9 @@
|
|
|
121
123
|
overflow: hidden;
|
|
122
124
|
margin-bottom: 30px;
|
|
123
125
|
}
|
|
124
|
-
}
|
|
126
|
+
}
|
|
125
127
|
```
|
|
128
|
+
```
|
|
126
129
|
@media only screen and (max-width: 780px) {
|
|
127
130
|
.roll-client .client-item img {
|
|
128
131
|
max-width: 100%;
|
|
@@ -138,8 +141,9 @@
|
|
|
138
141
|
h4 { font-size: 18px;}
|
|
139
142
|
h5 { font-size: 16px;}
|
|
140
143
|
h6 { font-size: 14px;}
|
|
141
|
-
}
|
|
144
|
+
}
|
|
142
145
|
```
|
|
146
|
+
```
|
|
143
147
|
/* Tablet Landscape */
|
|
144
148
|
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
|
|
145
149
|
.parallax {
|
|
@@ -235,8 +239,9 @@
|
|
|
235
239
|
.site-title {
|
|
236
240
|
font-size: 22px !important;
|
|
237
241
|
}
|
|
238
|
-
}
|
|
242
|
+
}
|
|
239
243
|
```
|
|
244
|
+
```
|
|
240
245
|
/* Mobile Portrait Size */
|
|
241
246
|
@media only screen and (max-width: 479px) {
|
|
242
247
|
.roll-project.fullwidth .project-item {
|
|
@@ -259,8 +264,9 @@
|
|
|
259
264
|
.text-slider {
|
|
260
265
|
margin-bottom: 15px;
|
|
261
266
|
}
|
|
262
|
-
}
|
|
267
|
+
}
|
|
263
268
|
```
|
|
269
|
+
```
|
|
264
270
|
@media only screen and (max-width: 320px) {
|
|
265
271
|
.text-slider {
|
|
266
272
|
margin-bottom: 0;
|
2
質問の仕方を丁寧に教えていただいてありがとうございます。ご指摘いただいた点再度訂正いたしました。どうかご教授ください。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
.masonry-layout .hentry {
|
|
27
27
|
width: 455px;
|
|
28
28
|
}
|
|
29
|
-
}
|
|
29
|
+
}```
|
|
30
|
+
```
|
|
30
31
|
/* Smaller than standard 980 */
|
|
31
32
|
@media only screen and (max-width: 991px) {
|
|
32
33
|
.site-header.fixed {
|
|
@@ -86,7 +87,8 @@
|
|
|
86
87
|
.text-slider-stopped {
|
|
87
88
|
top: 70%;
|
|
88
89
|
}
|
|
89
|
-
}
|
|
90
|
+
}```
|
|
91
|
+
```
|
|
90
92
|
@media only screen and (max-width: 1024px) {
|
|
91
93
|
.slides-container .slide-item,
|
|
92
94
|
.panel-row-style {
|
|
@@ -119,7 +121,8 @@
|
|
|
119
121
|
overflow: hidden;
|
|
120
122
|
margin-bottom: 30px;
|
|
121
123
|
}
|
|
122
|
-
}
|
|
124
|
+
}```
|
|
125
|
+
```
|
|
123
126
|
@media only screen and (max-width: 780px) {
|
|
124
127
|
.roll-client .client-item img {
|
|
125
128
|
max-width: 100%;
|
|
@@ -135,7 +138,8 @@
|
|
|
135
138
|
h4 { font-size: 18px;}
|
|
136
139
|
h5 { font-size: 16px;}
|
|
137
140
|
h6 { font-size: 14px;}
|
|
138
|
-
}
|
|
141
|
+
}```
|
|
142
|
+
```
|
|
139
143
|
/* Tablet Landscape */
|
|
140
144
|
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
|
|
141
145
|
.parallax {
|
|
@@ -144,7 +148,8 @@
|
|
|
144
148
|
background-position: top center!important;
|
|
145
149
|
}
|
|
146
150
|
}
|
|
151
|
+
```
|
|
147
|
-
/* All Mobile Sizes */
|
|
152
|
+
``` /* All Mobile Sizes */
|
|
148
153
|
@media only screen and (max-width: 767px) {
|
|
149
154
|
.posts-layout {
|
|
150
155
|
max-width: 100%;
|
|
@@ -230,7 +235,8 @@
|
|
|
230
235
|
.site-title {
|
|
231
236
|
font-size: 22px !important;
|
|
232
237
|
}
|
|
233
|
-
}
|
|
238
|
+
}```
|
|
239
|
+
```
|
|
234
240
|
/* Mobile Portrait Size */
|
|
235
241
|
@media only screen and (max-width: 479px) {
|
|
236
242
|
.roll-project.fullwidth .project-item {
|
|
@@ -253,7 +259,8 @@
|
|
|
253
259
|
.text-slider {
|
|
254
260
|
margin-bottom: 15px;
|
|
255
261
|
}
|
|
256
|
-
}
|
|
262
|
+
}```
|
|
263
|
+
```
|
|
257
264
|
@media only screen and (max-width: 320px) {
|
|
258
265
|
.text-slider {
|
|
259
266
|
margin-bottom: 0;
|
1
質問の仕方を丁寧に教えていただいてありがとうございます。ご指摘いただいた点はこういった内容でよろしいでしょうか？
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
また、記入したcssの問題なのか、div#primary.content-area.col-md-9のテキストが綺麗に折り返されません。
|
|
8
8
|
|
|
9
9
|
###該当のソースコード
|
|
10
|
-
/* Media Queries
|
|
10
|
+
```/* Media Queries
|
|
11
11
|
-------------------------------------------------------------- */
|
|
12
12
|
@media only screen and (min-width: 1930px) {
|
|
13
13
|
.parallax {
|
|
@@ -259,10 +259,11 @@
|
|
|
259
259
|
margin-bottom: 0;
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
+
```
|
|
262
263
|
|
|
263
264
|
###試したこと
|
|
264
265
|
上記cssの後に,こちらを記入してみました。
|
|
265
|
-
.col-md-9 {
|
|
266
|
+
```.col-md-9 {
|
|
266
267
|
position: relative;
|
|
267
268
|
top: 25%;
|
|
268
269
|
right: 0;
|
|
@@ -270,10 +271,12 @@
|
|
|
270
271
|
left: 20%;
|
|
271
272
|
width: auto;
|
|
272
273
|
height: auto;
|
|
273
|
-
}
|
|
274
|
+
}```
|
|
274
275
|
また、floatさせright指定もしてみましたが、上記問題のように左側に余白が過剰にできてしまいました。
|
|
275
276
|
|
|
276
277
|
|
|
277
278
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
278
279
|
cssなどの記入は善意の方のwebサイトを参考に色々試しましたが、うまくいっていません。
|
|
279
|
-
どうかご教授願います。
|
|
280
|
+
どうかご教授願います。
|
|
281
|
+
こちらが[デモサイト](http://demo.athemes.com/sydney/)です。
|
|
282
|
+
こちらが[ダウンロード先](http://athemes.com/theme/sydney/#)です。
|