Создание особого гибкого адаптера - PullRequest
Новая
       59

Создание особого гибкого адаптера

1 голос
/ 19 сентября 2019

Для моего школьного проекта, который должен быть выпущен в ближайшее время, я создаю веб-сайт с разделами, похожими на разделы «Наша работа» и «Следуй» на этом сайте: https://bellafare.com/

Я создал их заново с помощью flexbox, и они выглядят так же, как я хочу, на 15-дюймовом экране ноутбука и iphone 6/7/8.Тем не мение!При ширине от 646 до 978 макет выглядит ужасно, потому что одно или несколько изображений оказываются под строкой.Есть ли способ исправить это с помощью медиазапроса и сделать так, как на веб-сайте Bellafare, чтобы размер div уменьшался по мере уменьшения экрана до тех пор, пока он не будет работать на платформе iphone 6/7/8, а затем превратился в столбцы?Я перепробовал несколько вариантов, но зашел в тупик.Кроме того, как сделать так, чтобы текст заканчивался на изображениях?

html: 


<div class="classes">
        <div><a href="#">Beginner<img src="bella1.png"/></a></div>
        <div><a href="#">Intermediate<img src="bella2.png"/></a></div>
        <div><a href="#">Advanced<img src="bella3.png"/></a></div>
        </div>

и 


 <section class="ig">
        <header>
            <h3><i>follow along <a href="XXX">@XXX</a></i></h3>
        </header>
        <div class="iglinks">
        <div><a href="#"><img src="ig1.png"/></a></div>
        <div><a href="#"><img src="ig2.png"/></a></div>
        <div><a href="#"><img src="ig3.png"/></a></div>
        <div><a href="#"><img src="ig4.png"/></a></div>
        <div><a href="#"><img src="ig5.png"/></a></div>
        <div><a href="#"><img src="ig6.png"/></a></div>
        </div>
    </section>

CSS: 


.classes {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
}

.ig {
    margin-top: 50px;
}

.iglinks {
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: space-around;
}

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

1 Ответ

0 голосов
/ 19 сентября 2019

Исправьте ваш flex-flow с помощью nowrap 

 .iglinks {
    flex-flow: row nowrap;
    }

и сделайте ваши изображения отзывчивыми: 

@media (min-width: 646px) and (max-width:978px){
  .iglinks img {
    width: 100%;
    height: auto;
  }
}

вам может потребоваться добавить некоторые отступы

...