Правильно ли я сделал верстку под разные мониторы?

[afagorn]

Сайт http://burzhuy.org/deal/
Проблема с первым "блоком", где изображен мужчина по имени Гейб с облачком

На родительский блок gabe фоном ставлю цельное изображение Гейба с облачком
 

background: transparent url("/deal/img/gabe_big2.png") no-repeat scroll center center / cover;

Потом идет меню, блок с текстом, который должен находиться и кнопка.
Блок с текстом при разных разрешениях монитора будет скакать, поэтому я сделал такие правила для этого блока. Еще этот блок растягивает родительский блок так чтобы фон не был маленьким или очень большим

	@media (min-width: 768px) {		.cloud {			padding: 6% 58% 10% 8%;		}			.cloud p {				font-size: 15px;			}			.cloud span {				font-size: 20px;			}			.cloud2 { /*"Deal with it  вот что по настоящем круто!"*/				padding-left: 10%;			}				.cloud2 h1 {					font-size: 33px;				}			.cloud3 {	/*"Круто!"*/				padding-right: 29%;			}				.cloud3 h2 {					font-size: 27px;				}	}@media (min-width: 1000px) { /*ipod*/	.cloud {		padding: 5% 54% 7% 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;			}}	@media (min-width: 1120px) { 		.cloud {			padding: 6% 58% 10% 8%;		}			.cloud p {				font-size: 16px;			}			.cloud2 { /*"Deal with it  вот что по настоящем круто!"*/				padding-left: 12%;			}			.cloud3 {	/*"Круто!"*/				padding-right: 29%;			}	}	@media (min-width: 1200px) { /*Me*/		.cloud {			padding: 5% 57% 9% 14%;		}			.cloud p {				font-size: 18px;			}			.cloud2 { /*"Deal with it  вот что по настоящем круто!"*/				padding-left: 12%;			}			.cloud3 {	/*"Круто!"*/				padding-right: 26%;			}	}

Правильный ли это подход к такой задаче?

[VeniVidiVici]

Делать ширину блока с помощью внутренних отступов.....странновато.

Облако надо было делать фоном для .cloud  а не вместе с гейбом))) А то получается что при маленькой ширине окна это облако уже не видно.

Ещё я не понял зачем вы выставили .cloud свойство z-index.

.cloud1,.cloud2,.cloud3 - можно было без этого обойтись.

 

Ну это если сильно кратко))))

 

Для начала попробуйте сделать этот макет фиксированным(с нормальными блоками нужной ширины а не с помощью padding), а потом уже лезьте в дебри адаптивной вёрстки)

Edited November 13, 2015 by VeniVidiVici

[afagorn]

Делать ширину блока с помощью внутренних отступов.....странновато.

Облако надо было делать фоном для .cloud  а не вместе с гейбом))) А то получается что при маленькой ширине окна это облако уже не видно.

Ещё я не понял зачем вы выставили .cloud свойство z-index.

Ну это если сильно кратко))))

Ширина задается с помощью строчек(.row) бутстрапа, а паддинги облачка растягивают по высоте

Тоже была идея сделать облачко отедельным, но проще когда с помощью параметра "cover" в атрибуте background фон уменьшается до границ родительского блока

z-index в творческом порыве поставил зачем-то

Хотелось бы более подробнее