- このトピックには3件の返信、2人の参加者があり、最後ににより9年、 1ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
4件の投稿を表示中 - 1 - 4件目 (全4件中)
- このトピックに返信するにはログインが必要です。
いつもお世話になっております。
現在、サイトデザイン構築中のサイトにおいて、タブレット系端末での表示で
一部のカラム(container)がレスポンシブされないと言う現象が発生しています。
■現在のテーマ
Voyageur by DigiPressバージョン: 1.0.2.5
■検証用端末 docomo
Xperia Z2 Tablet SO-05F
【1】ソースを見ると影響していそうな箇所は以下のようです
<div id="container" class="dp-container home clearfix show-header">
貴社の提供中テーマの「Voyageur デモサイトを見る」と自社のサイトソースを
Firefoxのインスペクタにて比較してみましたが自社のサイトでは【1】の要素には
行番号 6 margin 、7 width のスタイル要素が打消しされていませんでした。
.dp-container {
position: relative;
clear: both;
text-align: left;
margin: 15px 15px 15px 315px;
padding: 30px;
width: calc(100% - 330px);
}
また、【1】の要素に存在するであろう(貴社サイトソースでは存在する)
以下のスタイル要素は自社サイトでは【1】へ対して影響していない可能性がある様です。
.dp-container {
margin: 10px;
width: calc(100% - 20px);
}
試しにオリジナルスタイルシート設定を空(記述なし)の状態で確認をしてみましたが
状況は変わりませんでした。
Voyageur by DigiPressバージョン を最新の 1.0.2.6 へ更新をすれば同現象が起こらないかどうかも分かりません。
導入中のプラグイン関係がCSSの要素に影響している事はあまり考えにくいのですが
こちらの現象について解決策が御座いましたらご指摘を頂ければ幸いです。
対象サイト URL
http://loungeparty.bar/
念のため、ソースコード及び Xperia Z2 Tablet SO-05F での閲覧時のスクリーンショットを添付致します。
追記
>行番号 6 margin 、7 width のスタイル要素が打消しされていませんでした。
行番号 5 margin 、7 width のスタイル要素が打消しされていませんでした。
行番号5番の誤りです。
添付画像が2点アップロードできませんでしたので
もう1点こちらで追加いたします。
最新バージョンでは .container ではなく、 .dp-container にclass名が変更されています。
対象サイトでは、ソース上では .dp-container がありますが、メディアクエリのスタイルが .container に対する width:calc(100% – 20px) となっています。
まずは正規の手順で最新版にアップデートを行ってください。
ご回答を頂きまして有難うございます。
ひとまずアップデートを試みてみます。
お手数をお掛け致しました。