отзывчивый дизайн Materialise CSS

Question

Я должен создать страницу пользователя для нашего сайта клуба, но я использую Materialise CSS вместо Bootstrap. Мне трудно заставить его реагировать. Мое содержимое выглядит странно, текст выходит из коробки, а кнопки склеиваются.

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
        <div class="col s12">
            <div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
            <div class="card-image">
                <img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
            </div>
            <div class="card-stacked grey-text text-lighten-1">
                <div class="row">
                    <div class="card-content" style="margin-top: -30px;">
                        <h3 class="light-blue-text"><b>Username</b></h4>
                        <p style="margin-top: -10px;">Developer</p>
                        <br>
                        <br>
                        <h5><b>Area of Interest</b></h4>
                        <p>HTML</p>
                    </div>
                </div>
                <div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
                    <span><a href="#" target="_blank"><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></a></span>


                    <span><a href="#" target="_blank"><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></a></span>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/

Выше ссылки я удалил все попытки сделать ее отзывчивой.

Answer 1

В вашем коде было довольно много частей, которые отклонялись от предложенной материализованной структуры .

1) В общем, пока вы не знакомы с тем компонентом, с которым работаете, придерживайтесь примеров кода:

<div class="row">
 <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/100/190/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>

Карты живут в столбцах, которые располагаются внутри строк.

2) Используйте действие карты как нижний колонтитул, а не .footer

Для карточек нет класса .footer. Он называется .card-action:

<div class="card-action">
    <a href="#">This is a link</a>
</div>

3) Используйте .btn, чтобы придать любому элементу кнопку стиль:

<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>

У вас был span> button > А - это не обязательно. Будь проще. Любой элемент можно сделать похожим на кнопку, просто добавив .btn. Кроме того, если текст вашей кнопки слишком длинный, он выплеснется или обрежется. Фигово. Убедитесь, что вы не помещаете ненужный дополнительный текст в кнопки. Я удалил слово «профиль» из ссылки, другим решением было бы уменьшить размер шрифта или перейти на стандартную карту, чтобы освободить место для нижнего колонтитула.

4) Будьте осторожны, с какими ограничениями вы надевание ваших изображений, а также стандартной карты (изображение вверху) часто может работать лучше. Чтобы ваше изображение работало лучше, я снял высоту 300x и вместо этого дал ему высоту: 100% и object-fit: cover, которая лучше заполнит пространство (подгонка объекта не поддерживается в IE)

5) Наконец, у ваших тегов a есть небольшое поле, чтобы они имели интервалы при суммировании на мобильных устройствах.

Обновлен код ручки здесь .

РЕДАКТИРОВАТЬ:

Добавлен второй пример карты с использованием Изображение карты , которое помещает изображение карты вверху карты.

https://materializecss.com/buttons.html https://materializecss.com/cards.html