Блог

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

Маленький размер экрана — Большое пространство между шрифтами значков и текстом

Большой размер экрана — небольшое пространство между шрифтами значков и текстом

Вот мой HTML-код — я пытался удалить «< /span>» как средство устранения новых строк:

    <div class="item"> 
<span class = "icon-mobile"> 
<span class="caption">Call </div>

<div class="item"> 
<span class = "icon-mail"> 
<span class="caption">Email </div> 

<div class="item"> 
<span class = "icon-location"> 
<span class="caption">Studio </div> 

<div class="item"> 
<span class = "icon-calendar">
<span class="caption">Hours</div>
  

Вот код CSS3 для вышеупомянутых HTML-разделов / классов (.contact_details — это контейнер):

 .contact_details{
    text-align: center;
}

.item {
    vertical-align: top;
    display: inline-block;
    width:auto;
    height:auto;
    margin:0% auto; 
    color: #b31b1b;
}

/* Text Below Icon Fonts*/

.caption {
    display: block;
    text-align: center;
}
  

Код медиа-запросов CSS3 является:

 @media screen and (max-width: 299px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
    font-size: 2vw;
    }

    .caption {
        font-size: 1.5vw;
    }
}

@media screen and (min-width: 300px) and (max-width: 799px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item{
        font-size: 90%;
    }
    .caption {
        font-size: 30%;

    }
}

@media screen and (min-width: 800px) {
    .icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
        font-size: 5vw;
    }

    .caption {
        font-size: 2vw;
    }
}
  

Я попытался добавить «height: 50px;» и «height: auto;» к классам заголовка и элемента. Я попытался создать flexbox после создания дублирующейся строки на веб-сайте для тестирования:

 .contact_details2{
 display: flex;
justify-content: center;
}

.item2{
flex: 1 1 20em;
padding: 0!important;
}

.caption{
padding: 0!important;
}
  

Вот код для значка-шрифты просто на случай, если это кому-то пригодится:

 @font-face {
    font-family: 'debssite';
    src: url('fonts/debssite.eot');
    src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
    url('fonts/debssite.woff2?') format('woff2'),
    url('fonts/debssite.woff?') format('woff'),
    url('fonts/debssite.ttf?') format('truetype'),
    url('fonts/debssite.svg?') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'debssite';
    src: url('./fonts/debssite.svg?#debssite') format('svg');
  }
}
*/

[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: "debssite";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-calendar:before { 
    content: "e800"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-location:before { 
    content: "e801"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-mail:before { 
    content: "e802"; 
    font-size: 64px;
    color: #b31b1b;
} 
.icon-facebook:before { 
    content: "f09a"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-mobile:before { 
    content: "f10b"; 
    font-size: 64px;
    color: #b31b1b;
    margin:0px;
} 
.icon-youtube:before { 
    content: "f167"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-instagram:before { 
    content: "f16d"; 
    font-size: 32px;
    color: #b31b1b;
    margin-right 4%;
} 
.icon-pinterest:before { 
    content: "f231"; 
    font-size: 32px;
    color: #b31b1b;
    margin:10px;
}
  

Я был бы признателен за любую помощь / комментарии в попытке решить эту проблему, даже если вы считаете, что ваш комментарий не будет полезен (это может быть!).

Спасибо,

Ричард

создал редактирование, чтобы добавить код для значков-шрифтов.

Проблема была line-height в том, что как только я установил значение 0, я смог устранить пробелы.