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
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


Цитата(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;
}
}


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Верстка (стандартная, адаптивная, мобильная), натяжка на Wordpress, лендинги "под ключ"
отличное качество и заманчивые цены
17 vicatsu 9627 17.5.2018, 14:04
автор: vicatsu
Открытая тема (нет новых ответов) Адаптивная верстка. Разработка под ключ.
Бюджетные цены. Скидки для первых клиентов.
3 ed_production 523 14.5.2018, 13:17
автор: maxkis
Открытая тема (нет новых ответов) Кнопка в сниппете в результатах выдачи Яндекса
Чат с компанией
7 falken 848 8.5.2018, 12:01
автор: genjnat
Открытая тема (нет новых ответов) Адаптивная верстка
натяжка на CMS
24 SeoJoke 9812 18.4.2018, 19:49
автор: k_artem
Открытая тема (нет новых ответов) Качественная, адаптивная верстка сайтов по доступным ценам!
HTML/CSS, SASS, Bootstrap, Ajax, JQuery+JavaScript
7 grysh 1712 17.4.2018, 13:54
автор: grysh


 



RSS Текстовая версия Сейчас: 24.5.2018, 8:42
Дизайн