0

/* Reviews */

.reviews {
	padding: 4.66rem 0;
	background: #222 url("images/Reviews/reviews-bg.jpg") center no-repeat;
}

.reviews__inner {
	text-align: center;
}

.reviews__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #12C2E9;
	
	margin-bottom: 0.73rem;
}

.reviews__suptitle {
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
}

.reviews__suptitle:after {
	content: "";
    display: block;
    width: 4rem;
    height: 0.3rem;
    margin: 3.33rem auto;

    background: linear-gradient(to right, #E100FF, #F80759);
}

.reviews__reviews {
	display: flex;
}

.reviews__item {
	display: flex;
	
	background-color: #222;
	
	margin: 0 2rem;
}

.reviews__content {
	text-align: left;
	
	margin: 0 1.5rem;
}

.reviews__name {
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: capitalize;
	color: #12C2E9;
	
	margin-bottom: 0.46rem;
	margin-top: 2.13rem;
}

.reviews__prof {
	font-size: 0.8rem;
	
	margin-bottom: 2.33rem;
}
<div class="reviews">
	<div class="container">
		<div class="reviews__inner">
			<h2 class="reviews__title">Reviews</h2>
			<h1 class="reviews__suptitle">WHAT OUR CLIENTS SAY</h1>
			
			<div class="reviews__reviews">
			
				<div class="reviews__item">
					<div class="reviews__photo">
						<img src="images/Reviews/2.png" alt="">
					</div>
					<div class="reviews__content">
						<div class="reviews__name">Rebecca Morrison</div>
						<div class="reviews__prof">Social Worker</div>
						<div class="reviews__text">
						<p>Curabitur interdum nulla ligula, ac iaculis est venon. 
						Quisque auctor, ex id posuere aliquam, lorem mauris venenatis sem, eu facilisis magna nibh. Praesent laoreet leo diam, ut suscipit purus malesuada laoreet. Aliquam erat volutpat.</p>
						</div>
						<div class="reviews__rating">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
					</div>
					
				</div>

				<div class="reviews__item">
				
					<div class="reviews__photo">
						<img src="images/Reviews/1.png" alt="">
					</div>
					
					<div class="reviews__content">
						<div class="reviews__name">Daniel Bllomberg</div>
						<div class="reviews__prof">Salesman</div>
						<div class="reviews__text">
						<p>Donec nec interdum turpis. Donec faucibus facilisis enim, ut fringilla urna elementum non. Mauris vel mauris ac tellus feugiat maximus. Sed augue enim, lacinia non dui ut, mollis vulputate felis. Vivamus consequat bibendum ullamcorper.</p>
						</div>
						<div class="reviews__rating">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
					</div>
					
				</div>
				
			</div> <!-- ./reviews__reviews -->
		</div> <!-- ./reviews__inner -->
	</div> <!-- ./container -->
</div> <!-- ./reviews -->

Блоки reviews расширяются вниз, а мне нужно чтобы они расширялись в длину.введите сюда описание изображения

1
  • 1
    @GreatorGod когда задаёте вопрос - выкладывайте код. Гадать на кофейной гуще никто не будет.
    – Denis640Kb
    22 дек 2019 в 19:58

1 ответ 1

0

Для расширения родительсково блока по горизонтали, это родительскому блоку нужно задать css свойство:

display: flex;
flex-wrap: nowrap;

Но в таких случаях обычно прикручивают слайдер.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.