Мой HTML веб-сайт выглядит совершенно иначе на устройствах других пользователей - PullRequest
0 голосов
/ 23 апреля 2020

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

Это ссылка на мой сайт: http://webdev.edinburghcollege.ac.uk/~HNCSOFTSA5/effc/register.php

Вот что видит мой друг: https://media.discordapp.net/attachments/485067625689514005/702930803574964296/unknown.png?width=1204&height=677)

И вот что я вижу: https://imgur.com/jbtpPdr

Еще раз, я был бы признателен за любую помощь

Ответы [ 3 ]

2 голосов
/ 23 апреля 2020

Сразу же, это выглядит как разметка и CSS для container2 немного странно.

Ваш HTML

<div img="" src="fifepin.png" class="container2">

Попробуйте это HTML

<div class="container2">

Ваш CSS

.container2 {
    background-color: #595959;
    padding: 30px 60px;
    background: src="img/fifestad.jpg";
    background-position: auto;
    background-repeat: repeat no-repeat;
}

Попробуйте это CSS

.container2 {
    background-color: #595959;
    padding: 30px 60px;
    background: url("img/fifestad.jpg"); /* reference is off */
    background-position: auto;
    background-repeat: repeat no-repeat;
}
1 голос
/ 23 апреля 2020

Добавьте это к вашему head, если его там еще нет:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
1 голос
/ 23 апреля 2020

Вам не хватает вашего закрывающего тега для вашего <p> в строке 128 . Это может вызывать непредсказуемые проблемы рендеринга на разных браузерах и устройствах.

После значений атрибута заполнителя в ваших элементах ввода (строки 78 и 86) также должен быть пробел.

Кроме того, атрибут align устарел. Вы должны использовать css для стилизации, когда это возможно.

Попробуйте выполнить код через HTML Validator , чтобы устранить многие потенциальные проблемы.

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