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



 

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

Открыть тему
Тема закрыта
> Адаптивная кнопка
Poesie
Poesie
Topic Starter сообщение 14.9.2014, 16:07; Ответить: Poesie
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 72
Регистрация: 12.8.2014
Поблагодарили: 12 раз
Репутация:   2  


Верстаю сайт (адаптивно, поэтому и задалась вопросом)

Имеется блок

Если уменьшить окно браузера (или зайти с маленького девайса), все очень плохо:


Код кнопки
<a class="more-link" href="http://braincu.com/feedback-for-twitter/">Leave feedback</a>

CSS
a.more-link {
position: relative;
top: 1em;
padding: 4% 4% 4% 4%;
background: #27ae60;
line-height: 1;
color: #fff;
border-radius: 4px;
}

width:100% и font-size: 100%/90%/etc. пробовала, не помогло
Хотелось бы, чтобы кнопка выглядела так


Как это реализовать?

Сообщение отредактировал Poesie - 14.9.2014, 16:07
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 14.9.2014, 16:18; Ответить: x64
Сообщение #2


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3435
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2750 раз
Репутация:   289  


Цитата(Poesie @ 14.9.2014, 16:07) *
line-height: 1;

один чего? (%, em, px, pt, ...)

задайте ещё display:inline-block;

и посмотрите свойство box-sizing и как его значения влияют на подсчёт width/height/padding/border


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


Поблагодарили: (4)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Poesie
Poesie
Topic Starter сообщение 14.9.2014, 16:34; Ответить: Poesie
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 72
Регистрация: 12.8.2014
Поблагодарили: 12 раз
Репутация:   2  


display: inline-block; помог, спасибо

Проблема решена
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sanasol
Sanasol
сообщение 15.9.2014, 20:35; Ответить: Sanasol
Сообщение #4


Участник
***

Группа: User
Сообщений: 111
Регистрация: 9.7.2013
Из: Санкт-Петербург
Поблагодарили: 47 раз
Репутация:   6  


Это не адаптивность, а просто нормальное отображение в непредвиденном случае.

Если хочется адаптиности нужно использовать разные стили для разных разрешений :)

Код
@media (max-width:500px) {
a.more-link {
  font-size: 10pt;
}
}

@media (min-width:501px) and (max-width:1280px) {
a.more-link {
  font-size: 15pt;
}
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Адаптивная вёрстка и натяжка на Wordpress, DLE, Joomla и др. Создание мобильных версий.
Хороший код с оптимизацией по скорости. Сайты и лендинги "под ключ
15 Nell 1184 13.12.2017, 23:36
автор: Nell
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСоздание сайтов любой сложности (фреймворки, CMS), Верстка (адаптивная, простая, лендинг), шаблоны, скрипты, любая задача
14 ZaDrotom 3715 23.11.2017, 16:09
автор: iddqd
Открытая тема (нет новых ответов) Адаптивная верстка
натяжка на CMS
20 SeoJoke 8706 11.11.2017, 21:28
автор: SeoJoke
Горячая тема (нет новых ответов) Верстка (адаптивная, простая, лендинг), шаблоны на любую CMS, скрипты
CMS практически не имеет значения, НЕ дизайнер
71 mmkulikov 73522 10.11.2017, 21:50
автор: mmkulikov
Открытая тема (нет новых ответов) Верстка (стандартная, адаптивная, мобильная), натяжка на Wordpress, лендинги "под ключ"
отличное качество и заманчивые цены
14 vicatsu 8767 9.10.2017, 20:14
автор: vicatsu


 



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