instagram widget wordpressの幅がモバイルで正しくない

Question

私は自分のブログのフッターに入れたinstagramプラグインをインストールしています。デスクトップ版の場合、それは完全にうまくいきますが、モバイル版では、デスクトップ上のように6つの画像の代わりに画面が小さくなり、すべての画像がお互いの下に並んでいます。

携帯で3行の画像を2行にするにはどうすればいいですか？各行の3つの画像が画面の左から右へ100％を占めていますか？ CSSで？

CSSが組み込まれているため、instagramプラグインの完全なスタイルCSSを教えてもらえません。しかし、検査要素から特定のcss要素をコピーし、!importantを後ろに置くことができます。私はちょうどそれを行う方法を知らない。

あなたはここでそれを見ることができます - >http://oihanevalbuenaredondo.be

EDITこれは私が今持っているものである

@media screen and (max-width:720px) { 
 
#sb_instagram .sbi_col6 { 
 
data-cols:3!important; 
 
} 
 
}

、それは私が各行に3枚の画像を得たことを修正します画像は四角形ではなく、画像は切り取られ、サイズは変更されません

Answer 1

あなたは、モバイルをターゲットとし、以下のCSSを追加するためにCSS @mediaクエリを使用する必要があります：

@media (max-width: 640px) { 
    #sb_instagram.sbi_col_3 #sbi_images .sbi_item, 
    #sb_instagram.sbi_col_4 #sbi_images .sbi_item, 
    #sb_instagram.sbi_col_5 #sbi_images .sbi_item, 
    #sb_instagram.sbi_col_6 #sbi_images .sbi_item { 
    width: 33.33% !important; 
    } 
    #sb_instagram .sbi_photo img { 
    width: 100% !important; 
    display: inline-block !important; 
    } 
    #sb_instagram .sbi_photo { 
    height: 33vw !important; 
    overflow: hidden; 
    background: none !important; 
    } 
} 

明らかに、あなたはしてもしなくてもよいすべてのため!importantを使用して終了する必要があるかもしれません。以下では上記のCSSの結果を追加：

を明らかに私は、プレースホルダのためのあなたの個人的な写真をスワップアウトしましたが、残りはあなたのコードです。