html - Joomla テンプレート (右側に白いストライプ)

Question

www.thames.ikas.sk ブラウザのサイズを画面の半分の幅に変更すると... 右側に白いストライプが表示されるのはなぜですか? 私のhtmlと本文が全幅でないのはなぜですか? ブラウザが全角の場合は問題ありません。タブレットや電話にも問題があります。助けてください

Answer 1

幅 960 ピクセル以上の画面を必要とするデザインを作成しました。ビューポートの幅が 960px よりも小さい場合でも、この幅よりも下の要素はこのスペースを使用する必要があります。

この強制された幅を使用しないようにデザインを変更するか、さらに悪いことに (私の意見では) 背景も横に伸びていることを確認してください。

Answer 2

#header_inner, #main_body_inner, #navigation_inner, #footer_inner {
width: 960px;
}

それはあなたの問題だ ;）

template.cssにいくつかのCSS/メディア クエリを追加する必要があります。

@media (max-width: 960px)
#header_inner, #main_body_inner, #navigation_inner, #footer_inner {
width: 100%;
}

ビューポートの条件を設定するために、これをテンプレートの index.php に入れる必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

両方のリンクを読んでください。Google 翻訳のリンクが機能していることを願っています ;)

編集: 固定幅 320px 以上のものはすべて @media-query で対処する必要があります。これは、ページを「レスポンシブ スタイル」にしたい場合にモバイル/タブレット デバイスで動作させるためです。

.logo クラスを確認してください (幅: 634px)

通常、次のようになります。

/* Default wide-screen styles */

@media (max-width: 1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}

@media (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}

@media (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}

@media (max-width: 320px) {
/* styles for iPhone/Android portrait */
}

@media (max-width: 240px) {
/* styles for smaller devices */
}