携帯端末で移動している要素

Question

私は一日中この髪を裂いていますので、助けや助言を歓迎します！

私の新しいプロジェクトでは、モバイルモバイル検索スクリプトを使用して、ユーザーがモバイルデバイスにいるかどうかを確認し、そうであれば通常のスタイルシートを無効にしてモバイルスタイルシートを有効にします。

私はそれでほとんどの問題を解決することができましたが、何らかの理由でセクションの1つにコンテンツスライダに問題があり、各スライドに2つのインライン要素があり、 1つの浮動右（画像）。何らかの理由で、2番目のスライドがクリックされると、イメージはテキストの下に移動します。通常、これは部屋がない場合に起こりますが、両方の要素に十分な余地があるので、そうではありません。

これは携帯端末でのみ発生しますので、実際にはhttp://beta.residencyradio.comに行って機能のセクションに移動し、タブレット用の現在のバージョンをご覧になることができます。

私の考えは、モバイルスタイルシート（下記）のこのコードスニペットの中の何かに関係している必要がありますが、私はあまりよく分かりません。

#feat { 
width: 60em; 
margin-top: 3.125em; 
display: inline-block; 
} 

.feat_container { 
width: 23.4375em; 
display: inline-block; 
margin-top: 9.0625em; 
margin-bottom: 9.0625em; 
float: left; 
} 

.feat_container p { 
font-size: 1.125em; 
line-height: 1.2em; 
margin-bottom: 0; 
} 

.feat_logo { 
width: 23.4375em; 
display: inline-block; 
float: right; 
margin: 0; 
} 

#feat_nav { 
float: left; 
display: inline-block; 
} 

#feat_nav a { 
background: url('../images/dot.png') no-repeat; 
font-size: 16px; 
padding-right: 9px; 
text-decoration: none; 
margin-right: 5px; 
color: rgba(1, 1, 1, 0); 
} 

#feat_nav a.activeSlide { 
background: url('../images/dot_active.png') no-repeat; 
} 

#PSM .feat_container { 
margin-top: 8.375em; 
margin-bottom: 8.375em; 
} 

#PSM, #banger, #hot, #eclectic, #definitive, #guest { 
width: 60em; 
} 

#guest .feat_container { 
margin-top: 7.6875em; 
margin-bottom: 7.6875em; 
} 

ご協力いただければ幸いです。

おかげで、

マイケル

Answer 1

[OK]を、私は実際には "電球の瞬間" の後にこれを理解するために管理します。何らかの理由で、モバイルデバイス（私はアンドロイドとアイオスをテストしました）は、スライドが変更されたときに、含まれている要素の幅をレンダリングする際に問題があるようで、右のフローティングコンテンツを強制的に削除します。

修正、単に

#PSM, #banger, #hot, #eclectic, #definitive, #guest { max-width: 60em; }

そして、それはそれをソートするに

#PSM, #banger, #hot, #eclectic, #definitive, #guest { width: 60em; }

を変更するには、それが誰かを役に立てば幸い！