問題タブ [responsive]

HTMLページをレスポンシブページに変換するためにクエリを使用して@mediaいますが、ページをレスポンシブページに変換するのに苦労しています。

私は使っている

私のCSSコードで

しかし、ブラウザの幅が 942px のときに背景色が変化しています。そして、私が書いているCSSコードは何でも@media(min-width:480px) and (max-width:959px). CSS スタイルは (max-width:) に対してのみ正常に機能します。

これらのバグ/問題により、HTML ページをレスポンシブ ページに変換できません。

ブートストラップを使用して、Web サイトのナビゲーション バーのトグルの横にクリック可能なアイコンを配置したいと思います。

プルとアラインのクラスで遊んでみましたが、うまくいきませんでした。

よろしく

私はFoundationが初めてで、Foundationのいくつかのコンポーネントを1つのナビゲーションバーに混在させようとしています.htmlで提供およびデモされたクラスとデータ属性を使用するだけです。

レスポンシブ トグル ドロップダウンの指示に従いました: http://foundation.zurb.com/sites/docs/responsive-navigation.html

そして、そのスティッキーを作りたいです。参照: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation、「タイトル バー、DropdownMenu、スティッキーを備えたスティッキー ナビゲーション メニューの作成!」

彼らはトグル部分を省略したので、htmlに提供するクラスとデータ属性だけを使用してこれが実現可能かどうかはわかりません.

両方を別々に動作させることはできますが、一緒にすることはできません。バグがあるようですが、それは私かもしれません。これを行うことに成功した可能性のある人から聞いてみたいです！

これは私がこれまでに持っているものです。より広いウィンドウは粘着性があり、応答性があります。少し上にスクロールするまで、ドロップダウンは最初はジャンボトロンの後ろにあります。

狭いウィンドウのレスポンシブ トグルは機能しますが、スティッキーは機能しません。そして、ウィンドウを少し広げるまで、最初はドロップダウンがジャンボトロンの下に落ちます。ドリルダウンは正常に機能します。

これはコードです：

ここでデモを見つけることができます: http://lucillekenney-demos.com/fruit/home.html

画面の全幅を占める背景画像を使用して、レスポンシブフォームを div 内に配置しようとしています。しばらく検索した後、背景画像の div を画像のフル サイズにする最良のオプションは、画像のサイズのパディング ボトムを使用することでした。問題は、小さな画面で見ると、背景画像の div が小さすぎてフォームのコンテンツに収まらないことです。min-width:100% を使用してみましたが、役に立ちませんでした。

html:

CSS:

だから私はこの画像を設定しようとしています: jordandevelop.com/test/img/header.jpg

ヘッダーの背景として。私が抱えている問題は、さまざまな画面解像度に応答しないことです。以下は、この現在のデザイン用に私が持っている CSS です。

どんなアドバイスも素晴らしいでしょう。ウェブサイトへのリンクは次のとおりです: https://jordandevelop.com/test/

編集: これがヘッダーの現在の CSS です。