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

Question

[Quartex]

Всем привет, я новичок, учусь вот верстать, взял шаблон и делаю под себя, нужно картинку сделать поменьше, я прописал style, но ничего не поменялось, может кто поможет?

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;
}
}

Answer 1

[Александр Филатов]

.photo img{width: здесь нужная ширина ; height:auto;}

Answer 2

[Odisseya]

Может, не поменялось из-за ошибки — забыли точку с запятой после «width: 400px»

.photo-content{
  padding-left: 60px;
  padding-top: 40px;
  width: 400px (!!!)
  height: 300px;
}

Comments

[Quartex]

эх, невнимательность, спасибо большое!