Flexbox: текст не сжимается пропорционально ⇐ CSS

[Anonymous]

Для веб-сайта, который я создаю, мне удалось воссоздать логотип компании (довольно простой) в Flexbox/CSS. Я нашел Flexbox CSS где-то в Интернете, но не помню где. В основном он нетронут, мои собственные стили находятся внизу в разделе /* Мои стили */

Так что, в принципе, это работает, но когда я изменяю размер окна браузера под фальшивый планшет- size-screen телефона-size-screen, текст внутри логотипа начинает сжиматься, когда размер экрана становится меньше 568 пикселей.

Присутствует некоторый CSS

Код: Выделить всё

@media all and (max-width: 568px) {
.col-span-1,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}

Кажется, это как-то связано с уменьшением текста, но я просто не понимаю. Еще несколько дней назад я не слышал о flexbox, поэтому я не гуру, когда дело доходит до этого.


Мне нужно, чтобы текст внутри логотипа пропорционально увеличивался и уменьшался независимо от размера экрана, но мне также нужны флексбоксы, чтобы перемещаются друг под другом, когда размер экрана становится меньше 568 пикселей.


Можете ли вы мне помочь с этим?< /p>

Заранее благодарим за вашу помощь и время, мы очень ценим!

С уважением,

Фике Базельманс

PS В приведенном ниже фрагменте кода размер результирующего кадра меньше 568 пикселей (на моем MacBook Pro 13"), поэтому я не уверен, что вы, ребята, видите, как должен выглядеть логотип, поэтому я добавлю ссылку на изображение логотипа, чтобы вы поняли мое дрянное объяснение < /p>

Изображение оригинального логотипа

Код: Выделить всё

@charset "UTF-8";

/* CSS Document */

.row {
margin-top: 0.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.col {
flex: 1 1 8%;
margin: 0 0 0.5rem 0;
padding: 0.5em 10px;
box-sizing: border-box;
}

.col-logo {
flex: 1 1 8%;
margin: 0;
padding: 0.5em 10px;
box-sizing: border-box;
}

/* nested grids */

.row .row,
.row.nested {
flex: 1 1 auto;
margin-top: -0.5em;
}

/* full width grids */

.row.wide-fit {
margin-left: -10px;
margin-right: -10px;
}

/* center grids */

.row.center {
justify-content: center;
}

.center .col {
flex-grow: 0;
flex-shrink: 0;
}

/* columns widths */

.col-span-1 {
flex-basis: 8.3333%;
}

.col-span-2 {
flex-basis: 16.6666%;
}

.col-span-3 {
flex-basis: 25%;
}

.col-span-4 {
flex-basis: 33.3333%;
}

.col-span-5 {
flex-basis: 41.6666%;
}

.col-span-6 {
flex-basis: 50%;
}

.col-span-7 {
flex-basis: 58.3333%;
}

.col-span-8 {
flex-basis: 66.6666%;
}

.row .col-logo.col-span-8 {}

.col-span-9 {
flex-basis: 75%;
}

.col-span-10 {
flex-basis: 83.3333%;
}

.col-span-11 {
flex-basis: 91.6666%;
}

.col-span-12 {
flex-basis: 100%;
}

/* examples */

.fixed-width {
flex: 0 0 500px;
background-color: rgba(255, 0, 0, 0.1) !important;
}

@media all and (max-width: 568px) {
.col-span-1,
.col-span-2,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}
.col-span-6,
.col-span-7,
.col-span-8,
.col-span-9,
.col-span-10,
.col-span-11 {
flex-basis: 100%;
}
.nested .col {
flex-basis: 100%;
}
}

/* eye candy */

body {
font-family: sans-serif;
}

.row {
background-color: #cccccc;
background-color: rgba(0, 0, 0, 0.1);
}

.col {
background-color: #999999;
background-color: rgba(0, 0, 0, 0.2);
background-clip: content-box;
border: 1px solid rgba(0, 0, 0, 0.1);
}

/* My Styles */

#header-logo-text-container {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
}

.header-logo-container {
min-width: 0;
background-color: #eb5d60;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
}

.header-logo-container:after {
content: "";
display: block;
padding-bottom: 100%;
}

.logo-whiteborder {
border: 0.4vw solid white;
display: flex;
justify-content: center;
}

.logo-whiteborder:after {
content: "";
display: block;
padding-bottom: 100%;
}

.header-logo-text-big {
color: white;
display: flex;
flex-shrink: 1;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
src: url('../font-gill-sans.woff');
font-size: 3.3vw;
margin-left: auto;
margin-right: auto;
min-width: 0;
padding-left: 1vw;
padding-right: 1vw;
}

.header-logo-text-small {
color: white;
display: flex;
flex-shrink: 1;
font-family: "Times New Roman";
font-size: 1.4vw;
letter-spacing: 0.12em;
margin-left: auto;
margin-right:  auto;
margin-top: 1.7vw;
margin-bottom: 1.7vw;
min-width: 0;
padding-left: 1vw;
padding-right: 1vw;
}

Код: Выделить всё

Untitled Document










Durlinger
financieel beheer

Подробнее здесь: https://stackoverflow.com/questions/445 ... ortionally