X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Адаптивные кнопки соцсетей
Frakiec
Frakiec
Topic Starter сообщение 8.3.2015, 20:08; Ответить: Frakiec
Сообщение #1


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


Всё ни как не разберусь, как сделать адаптивные кнопки соцсетей, перепробовал кучу вариантов, а толку ноль.
Так выглядят на мониторах.
Прикрепленное изображение

А так на мобильниках.
Прикрепленное изображение
Сами стили.
Развернуть/Свернуть
Код
a.btntwitter {
    background: none repeat scroll 0% 0% #00ABED;
    border-radius: 5px;
    font-family: Arial;
    font-size: 15px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    display: inline-block;
    width: 190px;
}
a.btnfb {
    background: none repeat scroll 0% 0% #4C68B3;
    border-radius: 5px;
    font-family: Arial;
    font-size: 15px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    display: inline-block;
    width: 190px;
}
a.btnvk {
    background: none repeat scroll 0% 0% #426B9A;
    border-radius: 5px;
    font-family: Arial;
    font-size: 15px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    display: inline-block;
    width: 190px;
}

А нужно, то всего ничего, чтоб уменьшалось и выравнивалось в одну строчку.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
un1name1d
un1name1d
сообщение 8.3.2015, 20:10; Ответить: un1name1d
Сообщение #2


Синдром вахтёра на пенсии
******


Группа: Active User
Сообщений: 1686
Регистрация: 20.1.2011
Поблагодарили: 1906 раз
Репутация:   172  


Попробуйте убрать это:

display: inline-block;


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Frakiec
Frakiec
Topic Starter сообщение 8.3.2015, 20:52; Ответить: Frakiec
Сообщение #3


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


un1name1d, Спасибо, помогло!нашел еще одно решение, задать ширину блоков, не в пикселях, а в процентах.(но нужна подгонка)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bibika
bibika
сообщение 8.3.2015, 21:48; Ответить: bibika
Сообщение #4


Завсегдатай
*****

Группа: Active User
Сообщений: 579
Регистрация: 23.7.2012
Из: Львов
Поблагодарили: 148 раз
Репутация:   12  


Цитата
Спасибо, помогло!нашел еще одно решение, задать ширину блоков, не в пикселях, а в процентах


Если речь идет о адаптивной верстке забудьте про пиксели, только проценты и другие единицы измерения em, rem и тд.

И обьязательно задайте значения для min-wight max-wight, для того что б на больших экранах кнопки не увеличивались, а на маленьких не уменьшались сильно. Хотя что мешало сделать кнопки в виде простых картинок, а на очень маленьких разрешениях их выстраивать не в одну строку, а в столбик.


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Frakiec
Frakiec
Topic Starter сообщение 8.3.2015, 22:01; Ответить: Frakiec
Сообщение #5


Участник
***

Группа: User
Сообщений: 189
Регистрация: 8.9.2010
Из: Фракия
Поблагодарили: 27 раз
Репутация:   7  


Цитата(bibika @ 8.3.2015, 21:48) *
только проценты

обязательно ;)
Цитата(bibika @ 8.3.2015, 21:48) *
Хотя что мешало сделать кнопки в виде простых картинок

мы, не ищем легких путей:)
Покопался, можно свойству display поставить значение inline, и все заработает)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sergey_Bex
Sergey_Bex
сообщение 8.3.2015, 23:45; Ответить: Sergey_Bex
Сообщение #6


Новичок
*

Группа: User
Сообщений: 40
Регистрация: 4.3.2015
Поблагодарили: 15 раз
Репутация:   3  


Попробуйте перейти от пикселей к процентам. Используйте формулу target/context=result. А лучше всего прочитайте книгу Итана Маркота "Отзывчивый веб-дизайн", всего около 270-ти страниц(есть на русском).
Удачи Вам.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Ручное добавление ваших ссылок на стены соцсетей и профили.
Руками добавлю ссылку на ваш сайт в профили соцсетей.
10 nahalturu 1081 19.11.2017, 21:56
автор: moneytuz
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыАвтогенерация кода кнопки на WP
Помогите народ) я прям в ступоре)
4 markus91 624 2.10.2017, 12:41
автор: markus91
Открытая тема (нет новых ответов) Адаптивные сайты (шаблоны), от 2 уе.
14 SOROKVLAD29 6094 29.9.2017, 11:47
автор: SOROKVLAD29
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНадо поменять картинки кнопки и всё прочее.
Сделать круто, чтобы не стыдно за сайт
0 atavisma 597 6.4.2017, 19:04
автор: atavisma
Открытая тема (нет новых ответов) Адаптивные шаблоны на продажу. CJ | Tube | etc.
1 Leming 1471 6.3.2017, 14:00
автор: Leming


 



RSS Текстовая версия Сейчас: 16.12.2017, 20:56
Дизайн