問題タブ [responsiveness]

私は非常に初心者のコーダーです.動作するようでした。

私は最初の公式ライブ Web サイトとして、友人のために「ゲーム一族」のワンページャー Web サイトを作成しています....私はまだこの分野で非常に新しいので、ゼロから始めるのではなく、修正されたブートストラップ テーマを使用することにしました... .

ウェブサイトの URL はwww.darknessmilitia.com です。

私が最初から抱えていた主な問題の 1 つは、ナビゲーション内のいずれかのリンクをクリックすると、ページを下にスクロールし続けても「アクティブ」な色のままで、誤ってリンクをダブルクリックしてしまうことです。リンクをクリックすると、jquery のスクロール アニメーションで綱引きをしているように、スクロールが数秒間うまくいきません。

私が見つけた他のすべてのバグは、モバイル ビューポートにのみあります。

1.携帯端末で横向きにすると名簿パネル・表が切れてしまう

2. 最初にロードしたときにページの下部にあるため、「非粘着」モードで名簿を上に折りたたむ方法を理解できません....これが不可能な場合は、どうにかしてかろうじて下にしたいですビューポートを開き、ボタンをクリックして最初に下にスクロールし、ナビゲーションを上に固定するように強制します。

3.リンクがクリックされると、モバイルのナビゲーションメニューが閉じません....ログインしようとするまではそれほど問題ではありません.モーダルはナビゲーションメニューの後ろに置かれます. モーダルの z-index を変更することもできると思いますが、リンクがクリックされたときに消えるようにしたいと思います。

私のコードが少し混乱している場合は、事前にお詫び申し上げます。最善を尽くしています:(

読んでくれてありがとう、どんなアドバイスも大歓迎です！

私のサイトはここです-

ご覧のとおり、私は wordpress と woocommerce を使用しており、製品アーカイブのスタイルをかなり重視しています。また、アンダースコアに基づくカスタム テーマも使用しています。

私が望むのは、デスクトップ サイズ (>992px) の場合は 1 行あたり 6 個の製品、タブレットの横向きの場合は 4 個、電話のサイズの場合は 2 個の製品を表示するサイトです。タブレットと電話のサイズはうまく機能しますが、デスクトップ ビューではすべての画像がページの左側に移動するのを止めることはできません。

列数を 6 に変更して、CSS をデスクトップ ビューに合わせて調整しようとしましたが、タブレットのサイズも台無しになります。私もブートストラップを使用してみましたが、それは物事をさらに間違っているようです!

css でやりたいことを行う方法はありますか、それとも woocommerce.php ファイル内の列を完全に削除する必要がありますか?

よろしくお願いします！

12 列に 960 ピクセルのブートストラップ グリッドを設定し、各行の幅を 1280 ピクセルにして、行の背景画像/色のみが幅 1280 ピクセルで、両側に 160 ピクセル (1280-960 / 2) のパディングがあるようにするにはどうすればよいですか?

商品画像として 400x400 の画像を配置しようとしています。しかし、この画像は引き伸ばされてぼやけて見えます。製品画像のデフォルトのウィンドウ サイズが 562x562 であるためだと思います。画像にカーソルを合わせると、画像の実際の解像度、つまり 400x400 が表示されます。woocommerce のウィンドウのサイズを変更する方法はありますか?? ここにリンクがありますhttp://mytalaash.com/product/image-2-2/

ブラウザでさまざまなサイズのデスクトップで正常に動作するマテリアル angularjs を使用して HTML ページを作成しました。

ただし、モバイル デバイスで同じページを開くと、デスクトップ アプリケーションのように動作します。モバイル デバイスのサイズでの応答性は示されません。

この問題を解決するために私を助けてください。