Почему после использования тэга, сайт показывается криво?

Question

[oleghtml]

Все началось с того что, сайт на телефоне выглядел отдаленно:

Чтобы сайт приблизить сразу когда он открывается, я в добавил

<meta name="viewport" content="width=device-width, initial-scale=1">

После этого сайт начал показываться так(то что нужно, только две картинки вышли с голубого фона):

Подскажите пожалуйста, как две картинки вернуть на голубой фон чтобы они с него не выходили.

Сайт: usa-beautiful.ru

Заранее спасибо!

Answer 1

[Артур Карапетян]

Этот тег указывает браузеру, что у сайта есть "мобильная версия". Без этого тега показывается полная версия сайта. Если у Вас что-то вылезло - нужно смотреть в код. А картинки вылезают за экран из-за свойства :
max-width: 500px
Нужно выставить
max-width: 100%

Comments

[Артур Карапетян]

И вообще у многих элементов стоит ширина больше 320 px и это нужно исправить. Советую посмотреть в сторону bootstrap или media-запросов

[oleghtml]

Артур: Спасибо!

[oleghtml]

Артур: посмотрю, сначала планировал сделать 2 кнопки bootstrap(1 кнопка на полэкрана), но идей не много разрослось).

Answer 2

[Ростислав Игнатенко]

У вас задан style для картинки немного не верно.

<img src="http://s019.radikal.ru/i605/1705/1b/25dbfdd219f0.png" alt="Купить дешевые билеты!" style="max-width: 500px;">

Для нормального отображения напишите вот так

<img src="http://s019.radikal.ru/i605/1705/1b/25dbfdd219f0.png" alt="Купить дешевые билеты!" style="width: 85%;max-width: 500px;">

Comments

[oleghtml]

Спасибо!