Модификация мультиссылок (taplink)

15 ноября 2020

Модификация страницы с мультиссылкой с помощью CSS:
— изменение отступов между кнопками;
— изменение размера текста на странице;
— изменение размера текста на кнопках
— отдельные настройки для десктопа, планшета и мобильной версии

Модификация мультиссылок (taplink). Фотограф Константин Шамин

Меня зовут Мария и я фотограф

+7 900 000 00 00

Санкт-Петербург

Как это сделано:

Добавьте на страницу с мультиссылкой HTML-блок, в который вставьте следующий код. Поправьте код на ваше усмотрения в соответствии с комментариями в нем.

<style>
/* десктоп */
.page-main > .sections-container {
   margin-bottom: 0px !important;
   margin-top: -1em !important; /* отступы между кнопками */
}
body {
   font-size:20px; /* размер текста */
}
.button {
   font-size:15px; /* размер текста на кнопках*/
}

/* планшеты */
@media screen and (min-width: 1280px) and (min-height: 960px) and (max-aspect-ratio: 2/1) {
   .page-main > .sections-container {
      margin-bottom: 0px !important;
      margin-top: -0.5em !important; /* отступы между кнопками */
    }
   body {
      font-size:25px; /* размер текста */
   }
   .button {
      font-size:20px; /* размер текста на кнопках*/
   }
}

/* мобильная версия */
@media screen and (max-width: 767px) {
   .sections-container:not(:last-child) {
      margin-bottom: -1em !important; /* отступы между кнопками */
   }
   body {
      font-size:20px; /* размер текста */
   }
   .button {
      font-size:15px; /* размер текста на кнопках*/
   }
}
</style>