Почему мои значки социальных сетей огромны?

Я попытался добавить иконки социальных медиа в свой заголовок только сейчас, и они примерно в 10 раз больше, чем они должны быть. Я прошел через css и использовал firebug, и я не могу найти, что это делает.Почему мои значки социальных сетей огромны?

Я хотел бы, чтобы они были их обычного размера и сидели в верхнем правом углу заголовка. Заранее спасибо!!

Вот как это выглядит (http://www.bolistylus.com):

enter image description here

Вот style.css:

a { 
    color: #254655; 
} 

ul, ol { 
    margin: 0 0 0 5.5em; 
} 

#page { 
    margin: 0 auto; 
} 

body{ 
background: #f3f3f3; 
border-top: none; 
border-top: 10px solid #666666; 
} 

#page { 
    margin: 0em auto; 
    width: 1000px; 
} 

.singular.page .hentry { 
    padding: 0.5em 0 0; 
} 

#branding{ 
background: #f3f3f3; 
color: #000000; 
border-top: none; 
position: relative; 
z-index: 2; 
} 

#site-title { 
    /*margin-right: 270px;*/ 
    padding: 0.66em 0 0 0; 
} 

#site-title a { 
    color: #111111; 
    font-size: 60px; 
    font-weight: bold; 
    line-height: 36px; 
    text-decoration: none; 
} 

#branding h1, header#branding a{ 
text-align: left; 
margin-right: 0; 
} 

#branding span{ 
text-align: center; 
} 

#branding img { 
    height: auto; 
    margin-bottom: -.66em; 
    width: 30%; 
} 

#branding .widget{ 
position: absolute; 
top: 2em; 
right: 7.6%; 
} 

#respond{ background: #E7DFD6; }      

.welcome{ 
margin: 15px 60px; 
background: #f3f3f3; 
border: 1px solid #f6ff96; 
padding: 15px; 
text-align: center; 
} 

/* =Menu 
-------------------------------------------------------------- */ 
/*.header_nav ul{ 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    width: 400px; 
    } 
*/ 

#branding img .sm-img { 
    height: auto; 
    margin-bottom: -.66em; 
    width: 100%; 
} 

.header_nav { 
    background: #f3f3f3 
    } 


.header_nav .head-nav { 
    border-bottom: 1px solid #cfcec9; 
    border-top: 1px solid #cfcec9; 
    margin-top: 30px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    text-align: right 
    } 

.header_nav ul li{ 
    display: inline; 
    } 

.header_nav ul li a{ 
    padding: 10.5px 21px; 
    color: #000000; 
    } 

.header_nav ul li a:hover, .menu ul li .current{ 
    color: #a8cb17; 
    text-decoration: none; 
    } 



#access { 
    background: #f3f3f3; /* Show a solid color for older browsers */ 
} 
#access ul { 
    font-size: 13px; 
    list-style: none; 
    margin: 0 0 0 -0.8125em; 
    padding-left: 0; 
} 
#access li { 
    float: center; 
    position: relative; 
    display: inline; 
} 
#access a { 

} 
#access ul ul { 

} 
#access ul ul ul { 

} 
#access ul ul a { 

} 
#access a:focus { 
} 
#access li:hover > a, 
#access a:focus { 
} 
#access ul li:hover > ul { 
} 
#access .current_page_item > a, 
#access .current_page_ancestor > a { 
    font-weight: bold; 
}

источник

2012-01-18 novicePrgrmr

Вы указываете процентное значение ширины несколько раз в вашем CSS, вот строки:

style.css (line 70) 
    #branding img { 
     height: auto; 
     margin-bottom: -0.66em; 
     width: 30%; //remove 
    } 

    style.css (line 530) 
    #branding img { 
     height: auto; 
     margin-bottom: -7px; 
     width: 100%; //remove 
    }

Удалите те, и они должны нормально отображения.

источник

2012-01-18 23:18:08

Попробуйте изменить CSS здесь:

#branding img { 
height: auto; 
margin-bottom: -0.66em; 
width: 3%; /* 3 not 30 */

}

В style.css линии 70

источник

2012-01-18 23:17:24 Kath

Строка 70 вашего стиля.css устанавливает атрибут ширины со значением 30%. Это приводит к тому, что ваши изображения растянутся до 30% их контейнера.

#branding img { 
height: auto; 
margin-bottom: -.66em; 
width: 30%; 
}

Отрегулируйте ширину до более низкого процента или полностью удалите ее.

источник

2012-01-18 23:19:22

Почему мои значки социальных сетей огромны?

ответ

Смежные вопросы