サイズを変更してブログのソーシャルメディアボタンを反応させるにはどうすればよいですか？

Question

私は助けが必要です。私は自分のブログテンプレートの問題に直面しています。 http://www.candidopinions.in/

iPhone 4（320 x 480）のように画面サイズが321ピクセル未満に縮小されても、すべてのモバイルデバイスに対応できるように非常に努力しましたが、私は社会的な問題に直面しています私のブログの名前候補のちょうど下のヘッダーとページ下部のボタンの下にあるメディアボタン（これらの2つのボタンのグループがスタックしています）私はCSSに堪能ではありませんが、 「トン。

誰かがこれらのボタンが応答することで私を助けることはできますか？

@media screen and (max-width:320px){ 
 
.post-outer {width:100%;} 
 
#search, #search-form {width:auto;} 
 
#search-form { font-size: 14px; } 
 
#breakingnews,.date-time {display:none} 
 
#header,#header .description,#header h1,#header p,#header a{text-align:center;margin:0 auto;} 
 
#header-wrapper{margin:0 auto;} 
 
#wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;} 
 
#social_networks{bottom:20px;display:block;float:none;text-align:center;margin:0 auto;} 
 
#social_networks ul {display:block;text-align:center;height:30px;margin:0 auto;} 
 
#social_networks li{display:inline-block;float:none;width:30px;height:30px; 
 
opacity:0.5;background-position:left top;border:3px solid #ffffff;border-radius:50%;transition:All 0.4s ease;} 
 
#social_networks li:hover{opacity:1;background-position:left -30px;border:3px solid #e291fd;box-shadow:0 1px 3px rgba(0,0,0,0.5);} 
 

 

 
#social_networks li a{display:inline-block;width:30px;height:30px;} 
 
#social_networks li a span{display:none;} 
 

 
#blog-pager{ 
 
font-size:13px; 
 
line-height:20px; 
 
padding:2em 0; 
 
} 
 
.showpageNum a,.showpage a,.showpagePoint{ 
 
margin-top:11px; 
 
margin-bottom:16px; 
 
margin-left:4px; 
 
font-size:13px; 
 
padding:6px 10px; 
 
} 
 
} 
 
@media screen and (max-width:240px){ 
 
.post-outer {width:100%;} 
 
#search, #search-form {width:auto;} 
 
#breakingnews,.date-time,#menutop {display:none} 
 
#header,#header .description,#header h1,#header p,#header a{text-align:center;margin:0 auto;} 
 
#header-wrapper{margin:0 auto;} 
 
#wrapper,#menu,#rapih,.tab{width:100%;margin:0 auto;} 
 
#social_networks ul{bottom:20px;}}

あなたのソーシャルボタンは、それらがビューポート内の1行に収まるようにするために、もはや余裕がない場合に、複数の行に流れる、応答動作しているかのように瞬間

Answer 1

社会アイコンは、それが見えます。これは330pxの下で蹴るように見える、とかなり標準的な動作ですが、あなたは1行にそれらすべてを維持したいならば、あなたはリスト項目の幅と高さを制御するためのメディアクエリを使用することができます。

@media screen and (max-width: whatever) { 
    selector { 
     width: Xpx; 
     height: Xpx; 
     padding/margin: (to control vertical/horizontal spacing) 
} 

これについてのいくつかの簡単な考え： 1.これはロゴをモバイル上でクリックするのを非常に小さくすることができますので、アクセシビリティ/ユーザビリティが複数の行に流れて保持する方が良いかもしれない彼らのサイズは、今のように、特にデバイス上の潜在的に小さなグループのユーザーのために< 330pxです。
2. Facebook、Twitterなどのロゴを表示するには、iconfontsを使用してください。背景画像を使用すると、現在はサイズ変更が非常に難しくなりますが、iconfontsではそれがはるかに簡単で、よりクリーンなHTMLが可能になります。それらの詳細：https://css-tricks.com/html-for-icon-font-usage/

ページネーション単位私にとっては、Chromeではモバイルのページがオーバーフローしています。おそらく、各ページ番号のスパンではなく、liタグの同じ使用法に切り替えるでしょう。これにより、より洗練された意味的に正しいコードが得られ、display：inline-blockを適用して応答するようにできます。上記と同じヒントがそこから適用されます。