@Quartex

Как менять размер картинки или дива?

Всем привет, я новичок, учусь вот верстать, взял шаблон и делаю под себя, нужно картинку сделать поменьше, я прописал style, но ничего не поменялось, может кто поможет?
5a588d6f1a590059834001.png
html
<div class="how-we-work-container">
			<div class="research-slope">
				<div class="photo"><img src="images/product.png" class="photo-content"></div>	
				<div class="research shape-content">
					<h3>We do our research</h3>
					<p>Morbi in velit ligula, eget vulputate ligula viverra, mi ae sollicitudin rhon usante roin gravida nibh vel velit auctor aliquet. Aeneanollic itudin lorem bibendum.Morbi in velit ligula, eget vulputate ligula viverra, mi ae solliciti rhoncusante roin gravida nibh vel velit auctor aliquetcv<p>
				</div>
			</div>
			<div class="we-perfection-slope">				
				<div class="we-perfection shape-content">
					<h3>We design perfection</h3>
					<p>Morbi in velit ligula, eget vulputate ligula viverra, mi ae sollicitudin rhon usante roin gravida nibh vel velit auctor aliquet. Aeneanollic itudin lorem bibendum.Morbi in velit ligula, eget vulputate ligula viverra, mi ae solliciti rhoncusante roin gravida nibh vel velit auctor aliquetcv<p>
				</div>
			</div>
			<div class="car"></div>
			<div class="clean-code">
				<div class="clean-code-box shape-content">
					<h3>Clean code</h3>
					<p>Morbi in velit ligula, eget vulputate ligula viverra, mi ae sollicitudin rhon usante roin gravida nibh vel velit auctor aliquet. Aeneanollic itudin lorem bibendum.Morbi in velit ligula, eget vulputate ligula viverra, mi ae solliciti rhoncusante roin gravida nibh vel velit auctor aliquetcv<p>
				</div>
			</div>
			<div class="we-launch-slope">
				<div class="we-launch shape-content">
					<h3>We launch the project</h3>
					<p>Morbi in velit ligula, eget vulputate ligula viverra, mi ae sollicitudin rhon usante roin gravida nibh vel velit auctor aliquet. Aeneanollic itudin lorem bibendum.Morbi in velit ligula, eget vulputate ligula viverra, mi ae solliciti rhoncusante roin gravida nibh vel velit auctor aliquetcv<p>
				</div>
			</div>
		</div>

.research-slope{
	margin: -150px -50px 0 -50px;	
	overflow: hidden;
	/*-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-o-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;*/
	height: 803px;
	position: relative;
	background-image: url("images/how-we-work/research-bg.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center top;
}

.research-slope:before {
	width: 52%; 
	height: 100%; 
	border-bottom: 810px solid rgba(231,76,68,0.9); 
	border-left: 150px solid transparent; 
	border-right: 50px solid transparent;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.photo-content{
	padding-left: 60px;
	padding-top: 40px;
	width: 400px
	height: 300px;
}
@media screen and(max-width: 600px) {
	.photo-content{
	padding-left: 100px;
	padding-top: 20px;
	width: 300px;
	height:200px;
}
}
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ответы на вопрос 2
Alfilatov
@Alfilatov
веб-разрабочик, дизайнер
.photo img{width: здесь нужная ширина ; height:auto;}
Ответ написан
Комментировать
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Может, не поменялось из-за ошибки — забыли точку с запятой после «width: 400px»
.photo-content{
  padding-left: 60px;
  padding-top: 40px;
  width: 400px (!!!)
  height: 300px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы