web-dev-qa-db-ja.com

WebサイトのメインページのレスポンシブHTMLコードを編集する場所

http://elitemaths.com.au/ というWebサイトを所有しています。現在、メインページモジュールは、「数学は難しい...」divと「あなたの...を満たす」というdivを備えたデスクトップブラウザーで正常に動作しているようです。これのスクリーンショットを添付しました。 enter image description here 。

ただし、同じページをiphone 6にロードすると、これらのdivが正しく機能しません。以下は私の携帯電話に表示されるものです。 enter image description here 。

Joomlaとhtmlはかなり新しいので、どこに行ってこれを分類しようとするのかわかりません。 「/ public_html/templates/elitemaths/local/css/themes/elitemaths」ディレクトリにあるtemplate.cssファイルを確認しましたが、このモジュールが配置されている場所が見つかりません。

この問題を修正するために作業するファイルを誰かが提案できますか？そして、可能であれば誰かが可能な修正を提案できますか？

本当にありがとう！

joomla-3.xtemplatesjhtml
1
Will Kim

これらのdivにはクラスh2 visible-lg visible-md visible-smがあります

次のコードは、それらのdivを非表示にします。

Line: 6685
.visible-xs, .visible-sm, .visible-md, .visible-lg {
    display: none !important;
}

大画面で表示される理由は次のコードです。

Line: 6795
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}.....

http://elitemaths.com.au/templates/elitemaths/local/css/themes/elitemaths/bootstrap.css

最初のコードからクラスvisible-lgを削除するか、2番目のコードをさらに編集できます。

3
John

あなたのテンプレートについては本当に知りませんが、それは良いファイルになる可能性があります。それは一般的に巨大なファイルです:) Joomlaに同梱されているprotostarテンプレートの場合はprotostar/css/template.cssです。
見つかったら、文字列@ mediaを検索する必要があります。これらはメディアクエリと呼ばれます。これらは、さまざまなメディアタイプの新しいスタイルルールを定義するために使用されます。次のように入力できます。

@media screen and (max-width:640px) :{
    p {
        background-color: red; } }

その場合、最大解像度が640pxのscreenであるデバイスから見た場合、段落の背景色は赤になります。
Word screenは重要です。メディアタイプです。 printのようなものをプリンタに指定できるからです！
これは非常に基本的な原則です。

2
jcm69