0

Учусь верстать адаптивные сайты. эти самые карточкиНа макете есть блок с 3 div по горизонтали. Как сделать так, чтобы при масштабировании они шли в ряд по вертикали. Эти карточки находиться внутри другого дива с параметрами display: flex; flex-direction: row. Про bootstrap слышал, но хочу без него.

<section class="second-side">
    <div class="second-container">
        <div class="second-side-text">
            <span class="second-span">ABOUT OUR DIGITAL AGENCY</span>
            <p class="second-p">Plantronics with its GN Netcom <strong>wireless headset</strong> creates the next generation of wireless headset and other products such as wireless amplifiers, and <strong>wireless</strong> headset telephone.</p>
        </div>
        <div class="second-side-cards">

            <div class="card1">
                <img class="card1-img" src="s1.jpg"></img>
                <div class="card1-text">
                <h5 class="card1-h5">ADDICTION WHIT GAMBLING</h5>
                <p class="card1-p">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This can be compared to an actual office’s files</p>
                </div>
            </div>


            <div class="card2">
                <img class="card2-img" src="s2.jpg"></img>
                <div class="card2-text">
                <h5 class="card2-h5">HEADSET NO LONGER WIRED</h5>
                <p class="card2-p">If you are in the market for a computer, there are a number of factors to consider. Will it be used for your home, your office or perhaps</p>
                </div>
            </div>


            <div class="card3">
                <img class="card2-img" src="s3.jpg"></img>
                <div class="card3-text">
                <h5 class="card3-h5">LIFE ADVICE LOOKING AT WINDOW</h5>
                <p class="card3-p">Having a baby can be a nerve wrackingexp erience for new parents – not the nine months of pregnancy, I’m talking</p>
                </div>
            </div>  

        </div>
    </div>
</section>

CSS

.second-side-cards {
	height: 70%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: green;
	flex-wrap: wrap;
}

.card1 {
	width: 30%;
	height: 100%;
	background-color: gray;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.card1-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60%;
	background-color: white;
	text-align: center;
}

.card1-h5 {
	font-family: Poppins;
	font-weight: 600;
	font-size: 1em;
}

.card1-p {
	font-family: Poppins;
	font-weight: 200;
	font-size: 1em;
}

.card1-img {
	max-width: 100%;
	height: auto;
	min-width: 100%;

}

.card2-img {
	max-width: 100%;
	height: auto;
	min-width: 100%;

}

.card3-img {
	max-width: 100%;
	height: auto;
	min-width: 100%;

}

.card2 {
	width: 30%;
	height: 100%;
	background-color: red;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.card2-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60%;
	background-color: white;
	text-align: center;
}

.card2-h5 {
	font-family: Poppins;
	font-weight: 600;
	font-size: 1em;
}

.card2-p {
	font-family: Poppins;
	font-weight: 200;
	font-size: 1em;
}



.card3 {
	width: 30%;
	height: 100%;
	background-color: orange;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.card3-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60%;
	background-color: white;
	text-align: center;
}

.card3-h5 {
	font-family: Poppins;
	font-weight: 600;
	font-size: 1em;
}

.card3-p {
	font-family: Poppins;
	font-weight: 200;
	font-size: 1em;
}

3
  • что за привычка показывать картинкой ? нужен код и только код html + css 29 сен 2018 в 13:42
  • Не могу прикрепить код
    – suNshine
    29 сен 2018 в 13:47
  • в принципе ответ я уже дал , вам только медиа запросы подтянуть надо 29 сен 2018 в 13:57

1 ответ 1

0

Разумеется что размеры мне не известны и взяты из головы

ЗДЕСЬ удобнее смотреть

* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  margin: auto;
}

.items {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  margin: auto;
}

.item {
  width: 30%;
  border: 1px solid red;
  padding: 6px;
}

@media (max-width:960px) {
  .items {
    flex-direction: column;
  }
  .item {
    width: 60%;
    margin: 20px auto;
    background: #fbfbfb;
    border: none;
    padding: 20px;
  }
}
<div class="items">
  <div class="item">
    <img src="http://placehold.it/200x300/cc0" alt="">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, quos vel iusto autem sed sit blanditiis fugit excepturi illum nihil?
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/200x300/cc0" alt="">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, quos vel iusto autem sed sit blanditiis fugit excepturi illum nihil?
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/200x300/cc0" alt="">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, quos vel iusto autem sed sit blanditiis fugit excepturi illum nihil?
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/200x300/cc0" alt="">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, quos vel iusto autem sed sit blanditiis fugit excepturi illum nihil?
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/200x300/cc0" alt="">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, quos vel iusto autem sed sit blanditiis fugit excepturi illum nihil?
    </p>
  </div>
  <div class="item">
    <img src="http://placehold.it/200x300/cc0" alt="">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, quos vel iusto autem sed sit blanditiis fugit excepturi illum nihil?
    </p>
  </div>
</div>

4
  • Добавил свой код, может вам поможет
    – suNshine
    29 сен 2018 в 13:56
  • @suNshine мало чем отличается ....медиа запросы пишите [email protected] пишите - разберёмся 29 сен 2018 в 13:59
  • Написал на почту :)
    – suNshine
    29 сен 2018 в 14:04
  • @suNshine пиши тем вивер в почту ... 29 сен 2018 в 14:06

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.