2016-11-26 2 views
-1

У меня есть страница продаж здесь: http://salesautopilot.s3.amazonaws.com/newsletter/letter/nl57825/ns103923/subscribe.htmlпризыв к действию модификации кнопки CSS

Моя проблема когда я просматривать сайт на мобильном телефоне, текст в синий призыв к кнопке действия перетекает кнопку.

Как изменить CSS кнопки, чтобы этого не произошло?

Я думаю, что это часть кода CSS, который определяет кнопку:

.mmform-container div.submitcontainer a.submitbutton,.mmform-container button.mmform-event-button,.mmform-container div.submitcontainer button.submitbutton { 
    background-color: #208dda; 
    border: none; 
    font-size: 26px; 
    font-weight: 600; 
    letter-spacing: 0.8px; 
    margin: 0 auto; 
    padding: 15px 0; 
    /*width: 70%;*/ 
    min-height: 20px; 
    color: #fff; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
    width: 70%; 
} 

Спасибо, ребята David

+1

Пожалуйста, добавьте к вашему вопросу соответствующий «* [mcve] *» код, включая HTML, а не только ссылку на него; таким образом, ваш вопрос является самодостаточным и имеет смысл и полезен для будущих посетителей. –

ответ

-1

, если вы просто изменить этот путь:

@media (max-width: 640px){ 
    .submitcontainer a{ 
     width:100%!important; 
    } 
+0

проблема не решена –

+0

если это почему -1? Мы можем исследовать проблему и прекрасно решить ее, не будучи плохим –

0

Ваш проблема в том, что последнее слово слишком велико, что при фиксированном размере и ширине шрифта он не подходит в одной строке. Вы можете использовать word-wrap: break-word;, чтобы сломать это слово, но потом это некрасиво.
Имо лучший сценарий будет либо:

  • уменьшить текст в кнопке (для просто «зарегистрировать») или
  • уменьшить размер шрифта для небольших экранов. Для этого вы можете использовать CSS media query.
Смежные вопросы