スマートフォン版でレスポンシブサイドバーが正しく動作しない

Question

このページのサイドバーに問題があります。私はそれをスマートフォン版では特に、レスポンシブバージョンでは下に置くことはできません。サイドバーには、左の内容に結合したままではなく

Thisが動作しないcodepen場合、これはウェブサイトのlinkあるcodepen
ためのリンクです折り返されません。

archive-posts-w.with-sidebar .archive-sidebar { 
    display: block !important; 
    position: relative; 
    top: inherit; 
    left: 0; 
    width: 100%; 
    max-width: 350px; 
    bottom: inherit; 
    right: inherit; 
    clear: both; 
    float: left; 
} 

HtmlウェブサイトのWordPressのソースのコピーであるため、確かにエラーが発生します。

Answer 1

ここではいくつかの問題がある を確認することを変更します。このようにする必要があり、あなたのサイドバー上の部分のために（メディアクエリでIE）小さな画面のためdisplay: blockに

CSSをそれを変更（のための小さな画面）：

.archive-posts-w.with-sidebar .archive-posts { 
    display: block; 
    vertical-align: top; 
    width: 100%; 
} 

そして.archive-posts-w.with-sidebar .archive-sidebarのためにあなたがmax-widthを持っています設定も350px、他のルールから継承されていますので、このルール（小画面の場合）を

に変更してください。

.archive-posts-w.with-sidebar .archive-sidebar { 
    display: block !important; 
    position: relative; 
    top: inherit; 
    left: 0; 
    width: 100%; 
    max-width: none;/* <-- this one is changed */ 
    bottom: inherit; 
    right: inherit; 
    clear: both; 
} 

Answer 2

まずそのTDクラス= "テスト" でクラステーブルTDを追加

td.test 
{ 
display:block 
} 

#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3 
{ 
     margin:0px!important; 
} 

#sb_instagram .sbi_header_text .sbi_bio、あなたは「余裕を持って、そのクラスで#sb_instagram .sbi_header_text H3 ：0 0 0 60PX！重要;' display: table;を持って.archive-posts-w.with-sidebar

あなたのコンテナ：あなたは0PX アブドデバイスhttp://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait