CSS для строк логотипов

Question

Я пытаюсь закодировать ряд логотипов в нижнем колонтитуле сайта https://www.andromedi.com/

Настольная версия работает нормально, но мобильное устройство должно выглядеть как это.

Я проверил онлайн и, по-видимому, можно использовать flexbox (мне все еще нужно лучше понять разницу между css-grid и flexbox)

Код css:

.footer-asociaciones-wrapper {
  width: 100%;
  margin: auto;
  padding: 1.5rem 5rem;
}


.footer-asociaciones-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.footer-asociaciones-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.footer-asociaciones-column img {
    height:100px;
}

.footer-asociaciones-column a {
    margin: auto;
}

p.footer-asociaciones-title {
  padding: 1.5rem 1rem;
  color: white;
  font-family: 'DIN1451EngschriftRegular';
  font-size: large;
}

Я пытался использовать ширину: 33%; но тогда логотипы перекрываются

Любая помощь приветствуется. Благодарность!

css flexbox

2

Sanne Tuin 29 Май 2019 в 17:53

Answer 1

Так что благодаря @BugsArePeopleToo я придумал решение:

.footer-asociaciones-column {
    display: flex;
  flex-direction: column;
  flex-basis: 33%;
}

@media screen and (min-width: 481px) {

    .footer-asociaciones-column {
        flex-basis: 100%;
        flex: 1;
    }

}

.footer-asociaciones-column img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  width: auto;
}

0

Sanne Tuin 29 Май 2019 в 15:25

Answer 2

Вам необходимо указать размеры изображений max-width и max-height, чтобы они менялись в зависимости от размера их контейнеров. Автоматические значения для height и width предназначены для поддержания соотношения сторон изображений.

.footer-asociaciones-column img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  width: auto;
}

2

BugsArePeopleToo 29 Май 2019 в 15:12

CSS для строк логотипов

2 ответа

Похожие вопросы

Новые вопросы

css