3

введите сюда описание изображения Есть картинка и блоки которые должны как бы косаться этой линии, если сделать на одной ширине и все подогнать минусовыми margin то норм, но на больших экранах оно ломается потому что картинка(эта линия) растягивается и уже нужно задавать другие отступы. Как сделать что бы все было норм на всех разрешениях ?

введите сюда описание изображения

.quarters{
	min-height: 800px;
	background: url(https://i.stack.imgur.com/8ypWz.jpg) no-repeat;
	background-size: cover;
	padding: 200px 0 0 0;
}
.line_quarters{
		width: 100%;
		margin-bottom: 0;
}
.block_querters_borders{
    height: 260px;
    border-left: 2px solid #34cb4d;
    margin-right: 100px;
}
.block_querters_borders:nth-of-type(2){
  margin: 0 100px 0 0;
}
.block_querters_borders:&:last-child{
  margin: 0 0 0 0;
}
.first_text_quarters{
  width: 184px;
  border-bottom: 2px solid #34cb4d;
  margin: 0 0 0 0;
}
.first_text_quarters h2{
  font-family: "Jura";
  font-weight: 700;
  color: #131314;
  font-size: 18px;
  text-align: right;
  margin: 0 0 4px 0;
}
.block_querters_borders ul{
  margin-top: 20px;
}     
.block_querters_borders ul li{
  color: #ffffff;
  font-family: "Jura";
  font-size: 14px;
  font-weight: 700;
  display: flex;
  margin-top: 16px;
} 
.block_querters_borders ul li:before,{
  width: 25px;
  height: 2px;
  box-shadow: 0 0 27px 1px rgba(37, 235, 70, 0.61);
  background: #34cb4d;
  content:"";
  float:left;
  overflow:hidden;
  margin:10px 15px 0 0;
}
.line{
  width: 100%;
  margin: 0;
}
.line_quarters_bottom{
  width: 100%;
  margin-top: 0;
}
.bottom_querters_borders{
  height: 280px;
  border-left: 2px solid #34cb4d;
  margin-right: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}     
.bottom_querters_borders:last-child{
  height:150px;
  margin: 0 0 0 0;
}
.two_text_quarters{
  width: 184px;
  border-bottom: 2px solid #34cb4d;
} 
.two_text_quarters h2{
  font-family: "Jura";
  font-weight: 700;
  color: #131314;
  font-size: 18px;
  text-align: right;
  margin: 0 0 4px 0;
}
.two_text_quarters ul{
    margin-top: 20px;
}  
.two_text_quarters ul li{
  color: #ffffff;
  font-family: "Jura";
  font-size: 14px;
  font-weight: 700;
  display: flex;
  margin-top: 16px;
}  
.two_text_quarters ul li:before,{
  width: 25px;
  height: 2px;
  box-shadow: 0 0 27px 1px rgba(37, 235, 70, 0.61);
  background: #34cb4d;
  content:"";
  float:left;
  overflow:hidden;
  margin:10px 15px 0 0;
}
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Watt</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" href="dist/main.css">
</head>
<body>
	<div class="wrapper">
		<section class="quarters container-fluid " id="quarters">
			<div class="row line_quarters justify-content-center">
				<div class="block_querters_borders">
					<div class="first_text_quarters">
						<h2>II квартал 2018</h2>
					</div>
					<ul>
						<li>
							Lorem ipsum dolor sit amet,<br>
							consectetur adipisicing elit,
						</li>
						<li>sed do eiusmod tempor incididunt</li>
						<li>ut labore et dolore magna aliqua.</li>
					</ul>
				</div>
				<div class="block_querters_borders">
					<div class="first_text_quarters">
						<h2>IV квартал 2018</h2>
					</div>
					<ul>
						<li>Lorem ipsum dolor sit amet,</li>
						<li>consectetur adipisicing elit,</li>
						<li>sed do eiusmod tempor incididunt</li>
						<li>ut labore et dolore magna aliqua.</li>
					</ul>
				</div>
				<div class="block_querters_borders">
					<div class="first_text_quarters">
						<h2>I квартал 2019</h2>
					</div>
					<ul>
						<li>Lorem ipsum dolor sit amet,</li>
						<li>sed do eiusmod tempor incididunt</li>
						<li>ut labore et dolore magna aliqua.</li>
					</ul>
				</div>
			</div>
			<div class="row line justify-content-center">
				<img src="https://i.stack.imgur.com/4TW9k.png" alt="line">
			</div>
			<div class="row line_quarters_bottom justify-content-center">
				<div class="bottom_querters_borders">
					<div class="two_text_quarters">
						<h2>III квартал 2018</h2>
					</div>
					<ul>
						<li>Lorem ipsum dolor sit amet,</li>
						<li>sed do eiusmod tempor incididunt</li>
						<li>ut labore et dolore magna aliqua.</li>
						<li>
							Lorem ipsum dolor sit amet, <br>
							consectetur adipisicing elit,
						</li>
						<li>sed do eiusmod tempor incididun</li>
					</ul>
				</div>
				<div class="bottom_querters_borders">
					<div class="two_text_quarters">
						<h2>II квартал 2019</h2>
					</div>
					<ul>
						<li>
							sed do eiusmod tempor incididun, <br>	 
							consectetur adipisicing elit,
						</li>
					</ul>
				</div>
			</div>
		</section>
	</div>
</body>
</html>

введите сюда описание изображения

4
  • 2
    Добавьте ваш код в вопрос 10 июл 2018 в 8:36
  • 1
    Не растягивать картинку, сами блоки (от куда идут линии) делать на position absolute, к самому контейнеру добавить position relative, а дальше блоки в зависимости от расширения экрана двигать с помощью top, right, bottom и left
    – Bert
    10 июл 2018 в 8:44
  • А вы разделите: фоновая картинка(часы) в родительский блок, а линию- в дочерний блок с контентом. Для дочернего: max-width и центрировать margin:auto. Ну и ваш код приведите, с большей вероятностью помогут.
    – zhurof
    10 июл 2018 в 8:46
  • самое лёгкое здесь будет SVG
    – user33274
    10 июл 2018 в 14:43

1 ответ 1

0

Для верхних блоков

margin-top: auto;

Для нижних блоков

margin-bottom: auto;
3
  • и что изменится? 10 июл 2018 в 10:19
  • Вместо того чтобы писать уже бы проверили
    – Netahaki
    10 июл 2018 в 14:00
  • ничего не меняется 11 июл 2018 в 10:49

Ваш ответ

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

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