サポート » 使い方全般 » テーマ　Inspirpヘッダーレスポンシブ対応について

テーマ　Inspirpヘッダーレスポンシブ対応について

  • 解決済 karamawariko

    (@karamawariko)


    1年、 9ヶ月前

    現在、テーマ：Inspiroを使用しています。

    こちらのテーマのデフォルトで、ヘッダーに動画を組み込んでいます。
    しかし、ここだけレスポンシブ対応になっていなくて、cssで書き換えているのですがうまくいかず…。

    どなたか、ご教授お願い致します。

    css

    @media screen and (max-width: 30em){
    #wp-custom-header-video {
    width: 100％ !important;
    height: auto;
}
}

    そもそもこの書き方が間違っていますか？
    追加cssなど追加する場所がなくて…

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • ishitaka

    (@ishitaka)

    1年、 8ヶ月前

    こんにちは

    下記のような CSS ではどうでしょうか。

    動画のみの場合

    .has-header-video .custom-header-media iframe,
.has-header-video .custom-header-media video {
	object-fit: contain;
}

    ヘッダーまるごとの場合

    .home.blog.has-header-video .custom-header-media {
	position: static;
	height: auto;
	min-height: 200px;
	max-height: 100vh;
}
.admin-bar.home.blog.has-header-video .custom-header-media {
	height: auto;
	max-height: calc(100vh - 32px);
}
.has-header-video.home.blog .custom-header {
	height: auto;
}
.has-header-video .custom-header-media iframe,
.has-header-video .custom-header-media video {
	position: static;
	min-height: auto;
	object-fit: contain;
}
    トピック投稿者 karamawariko

    (@karamawariko)

    1年、 8ヶ月前

    @ishitakaさん、ご返信ありがとうございます。

    上記、両方試しましたがだめでした。
    何かが邪魔をしているのでしょうか？

    もともと組み込まれているｃｓｓを優先できるのは！importantしかないですよね？

    追記：私の記述が悪く、補足です。
    PCは表示されますが、可変しない、ということで困っています。失礼しました！

    • この返信は1年、 8ヶ月前にkaramawarikoが編集しました。
    ishitaka

    (@ishitaka)

    1年、 8ヶ月前

    ブラウザのキャッシュは削除されましたか？

    トピック投稿者 karamawariko

    (@karamawariko)

    1年、 8ヶ月前

    @ishitakaさん

    はい、都度キャッシュクリアしてレスポンシブビューワーで画面確認を行なっています。
    動画自体はvimeoで作成して15秒くらいの短いやつなんですが…

    ishitaka

    (@ishitaka)

    1年、 8ヶ月前

    すみません、埋め込み動画のことを忘れてました。
    vimeo でしたら下記のような CSS ではどうでしょうか。

    .home.blog.has-header-video .custom-header-media {
	position: static;
	height: auto;
	min-height: 200px;
}
.admin-bar.home.blog.has-header-video .custom-header-media {
	height: auto;
	max-height: auto;
}
.has-header-video.home.blog .custom-header {
	height: auto;
}
#wp-custom-header {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 56.25%; /* vimeo 16:9 */
}
.has-header-video .custom-header-media iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
}
    トピック投稿者 karamawariko

    (@karamawariko)

    1年、 8ヶ月前

    @ishitakaさん、返信遅くなりました。
    上記の件は、未だ微妙ですがとりあえずは画面内に収めることができ、解決いたしました！

    元々書かれていたコード↓

    .has-header-video .custom-header-media video {
    position: fixed;
    left: 50%;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    min-width: 100vw;
    top: 50%;
    padding-bottom: 1px;
    transform: translateX(-50%) translateY(-50%);

    このfixed;を調整したらスマホ画面に収まることができたという‥。
    しかし、背景のバックスクリーンがスマホでも画面のheightがずれてしまいます、これはデバイスによって仕方のないことなのか、未だ分かりませんがとりあえずは見切れていないのでよしとします！

    本当にありがとうございました！

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「テーマ　Inspirpヘッダーレスポンシブ対応について」には新たに返信することはできません。

表示