Заставить контент оставаться в одной строке на всех телефонах - PullRequest
Новая
       12

Заставить контент оставаться в одной строке на всех телефонах

0 голосов
/ 24 июня 2018

Я создал мобильное меню для гамбургеров и попытался включить контактную информацию в это меню.

Я попробовал два подхода: первый работал на всех устройствах, кроме iPhone и других устройств, которые в основном используют сафари. Тогда строка с текстом оборвется.

Этот подход также включал медиазапросы. Надо сказать, что когда вы проверяете это на рабочем столе, все выглядит нормально, но на реальных телефонных устройствах после значков линия разбивается на две части.

Вот исходный код этого подхода: 

<div class="elementor-widget-container">
  <div class="elementor-text-editor elementor-clearfix">
    <p class="makeSmall" style="text-align: center;">
      <a href="mailto:maya@mayabarber.co.il">
        <img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;</a>
      <a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|</label></a>&nbsp;<span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643">&nbsp;052-6582643</a></span></p>
  </div>
</div>

Второй подход, который я пробовал, вроде работал, но значки выглядели меньше, чем количество пикселей, которое я определил, и все выглядело грязно. 

<div class="elementor-text-editor elementor-clearfix elementor-inline-editing" data-elementor-setting-key="editor" data-elementor-inline-editing-toolbar="advanced">
  <p class="makeSmall" style="text-align: center;">
    <a href="mailto:maya@mayabarber.co.il">
      <img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;</a>
    <a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|</label></a>&nbsp;<span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643">&nbsp;052-6582643</a></span></p>
</div>

Код CSS: 

.mobilemenucontact {
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: inline-block;
}

#mobilemenucontact {
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: inline-block;
}

@media only screen and (max-width: 375px) {
  .makeSmall {
    font-size: 95%;
  }
}

@media only screen and (max-width: 375px) {
  .email-mobile {
    width: 28px;
  }
}

@media only screen and (max-width: 375px) {
  .facebook-mobile {
    width: 28px;
  }
}

@media only screen and (max-width: 375px) {
  .column-contact {
    padding: 5px 30px;
  }
}

.active {
  border-bottom: 2.11px solid #61f6ff;
  padding: 4px;
  box-sizing: border-box;
  margin-bottom: 4px;
}

Так что я не уверен, какой подход выбрать, и я просто хочу, чтобы две иконки и номер телефона оставались в сети, независимо от того, какой это браузер или телефонное устройство. Я также хочу, чтобы промежутки между ними были одинаковыми, и чтобы значки имели ширину 33 пикселя.

Вот сайт, где вы можете проверить оба подхода: www.mayabarber.co.il

Вот как я хочу выглядеть, если вы предпочитаете создавать свой собственный отзывчивый код HTML / CSS и игнорировать мои неуклюжие попытки:

enter image description here

Спасибо!

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Ваша разметка слишком сложна, поэтому я создал список со ссылками и выровнял его, используя flex-box & align-items:center. 

.social-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.social-links li {
  padding: 10px 4px;
}

.social-links li.with-separator {
  border-left: 1px solid #61f6ff;
  margin-left: 16px;
  padding-left: 20px;
}

.social-links li img {
  vertical-align: middle;
}

.social-links a {
  text-decoration: none;
  color: #494c4f;
}

@media only screen and (max-width: 375px) {
  .social-links {
    flex-direction: column;
  }
  .social-links li.with-separator {
    border-left: 0;
    border-top: 1px solid #61f6ff;
    margin-left: 0;
    padding-left: 4px;
  }
}
<ul class="social-links">
  <li>
    <a href="mailto:maya@mayabarber.co.il" class="icon"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"></a>
  </li>
  <li>
    <a href="https://www.facebook.com/mayabarbercontrolcenter/" class="icon"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"></a>
  </li>
  <li class="with-separator"><a href="tel:0526582643">052-6582643</a></li>
  <li class="with-separator"><a href="tel:048201996">04-8201996</a></li>
</ul>
0 голосов
/ 24 июня 2018

Согласно приведенной выше ссылке, я думаю, что ваша проблема решится, если вы просто добавите следующее CSS на экран мультимедиа, где вы хотите применить эти изменения.

Также вы можете уменьшить заполнение или установить этов % вместо px. 

.elementor-nav-menu a{
   display: inline-flex;
}

Надеюсь, это вам поможет.

...