NextGenギャラリースライドショーで醜い空白を取り除くには？

Question

私はNextGenフリーワードプレスプラグインで生成されたスライドショーで16：9の画像を使用しています。画像が表示されますが、スライドショーの下には醜い空白が表示されます。特にブラウザウィンドウが狭くなると、それを修正する方法を知っている人はいますか？

Answer 1

スライドショー下の大きなギャップが様々な要素に設定されたpadding-top特性の組合せからです：HTMLファイル自体の行91に

• そのスタイルが削除された場合、あなたはそれは、.page-wrap { padding-top 83px }
• を持っていますあなたのテーマの一部であると思われるスタイルpaddingの略語から来る同じ要素の別のpadding-top値によって上書きされます。あなたのテーマCSSファイルの1027行には.page-wrap { padding: 83px 0 100px }と書いてあります。このファイルはhttp://thailandcontactfestival.com/wp-content/themes/sydney/style.css?ver=20170504にあります。
• .page .page-wrap .content-wrapperの全面に一般的なパッドがあり、30pxです。これはテーマCSSファイルの253行目に設定されています。
• 最後に、.panel-row-style.panel-row-style-for-51-0にインラインで適用された100pxの値のインラインpadding-topがあります。実際には略語として設定されています：padding: 100px 0px。これは実際にあなたのHTMLに書き込まれ、JavaScriptから来ていないようです。それは366行です。

これらのスタイルの一部またはすべてを修正/削除すると、ギャップを取り除くのに役立ちます。基本的にはCSSの問題です。これまでのNextGen Galleryとは直接関係がありません。

ブラウザで大きな白い隙間を右クリックし、「inspect」を押してからブラウザコンソールを突き抜けて、この問題を解決できます。コンソールには、各要素に関連付けられたすべてのHTMLとCSSスタイルを一覧表示するタブがあります。非インラインスタイルの場合は、CSSスタイルがどこから来ているのか（スタイルシートにリンクする）も教えてくれます。