проблема выравнивания картинок для мобильных сайтов

Question

Я начинающий программист и только что закончил свой первый сайт для моей группы c. Отлично смотрится на десктопах.

Проверьте это! grnbrier.com

На мобильном все картинки перепутаны.

неправильное размещение изображения

Вот мой код для этого. Может кто-нибудь сказать мне, что я сделал не так или каким-либо образом, чтобы он выглядел лучше на мобильных телефонах?

Answer 1

Это из-за того, что вы оставили поле для первого изображения, используя класс .image-margin. Это не только на мобильном устройстве, оно не выглядит по центру, это происходит и в других разрешениях, отличных от того, которое вы используете для его разработки.

Вы можете попробовать обернуть ваши изображения в элемент div. Затем вы можете установить свойство display: flex для этого div, а затем начать играть со свойствами aligment и justify.

Например:

<div class="my-flex-div">
  <a href="#"><img src="myimage.jpg/></a>
  <a href="#"><img src="myimage.jpg/></a>
  <a href="#"><img src="myimage.jpg/></a>
</div>

И тогда ваш стиль будет:

.my-flex-div {
    display: flex;
    justify-content: space-around;
}

Я рекомендую эту статью , чтобы узнать больше о flex.

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

@media only screen and (max-width: 600px) {
  .my-flex-div {
    flex-direction: column;
  }
}

Посмотрите эту статью относительно медиазапросов.

Попробуйте начать играть с этим материалом, и вы получите гораздо более хорошие результаты.