Разное отображение при одинаковом разрешении

[afagorn]

Сайт http://burzhuy.org/deal/. Использую фреймворк bootstrap

Имеется проблема с текстом в облачке "Мой собственный капитал...". На ipad текст отображается правильно, то есть не вылезает за границы облачка, но при таком же разрешении(1024х768) на компьютере текст отображается криво.

В css я использую @media, а именно для разрешения 1024х768 этот код
 

@media (min-width: 1000px) {	.cloud {		padding: 12% 54% 8% 8%;	}		.cloud p {			font-size: 15px;		}		.cloud span {			font-size: 19px;		}		.cloud2 { /*"Deal with it  вот что по настоящем круто!"*/			padding-left: 20%;		}			.cloud2 h1 {				font-size: 33px;			}		.cloud3 {	/*"Круто!"*/			padding-right: 29%;		}			.cloud3 h2 {				font-size: 27px;			}}

Код css родительского блока.
З.Ы. Человека, который изображен на фоне, зовут Гейб
 

.gabe {	background-color: #e5f3db;	z-index: 1;	margin-top: -97px;	background: transparent url(/deal/img/gabe_big2.png) no-repeat scroll center center / cover;}

Что нужно сделать чтобы текст отображался правильно и на ipad и на компьютере? И вообще правильный ли я использую подход? Если нет, то в какую сторону копать?

[afagorn]

Проблема решилась переносом топ-меню в блок с Гейбом.

Но если у кого-нибудь есть желание покритиковать мой подход и верстку, то я буду только "за"

Edited October 26, 2015 by afagorn