zmiana wymiarów diva

0

Witam, nie mogę zmienić rozmiaru diva i nie wiem czemu - chodzi mi o search-container, oto kod:

<!-- <!DOCTYPE HTML> 
<html lang='pl'> 
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
	<title>Strona RWD</title>
	<link rel='stylesheet' href='css/style.css'>
</head>
<body>

<div class='container'> -->

<!-- header -->
<!-- <header>
		<h1>Zarezerwuj wizytę lub badania</h1>
	</header> -->

<!-- main -->
<!-- <section id="main">
		<h1>RWD tutorial</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi. </p>
	</section>

</div>

</body>
</html> -->

<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
		integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>

	<title>Hello, world!</title>
</head>

<body>
	<div class="container reservationBox">
		<div class="row">
			<div class="col-sm reservation">
				<h1>Zarezerwuj wizytę lub badanie</h1>
			</div>
		</div>
		<form action="/action_page.php">
			<div class="row box">
				<div class="col-md-4 col-xs-12">
					<!-- <form action="/action_page.php"> -->
					<div>
						<label for="cities">Miasto <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Placówka <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Termin <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div class="row search-period-container">
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								3 dni
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								15 dni
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								30 dni
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Inny zakres <i class="fa fa-calendar" aria-hidden="true"></i>
							</button>
						</div>
					</div>
				</div>


				<div class="col-md-4 col-xs-12">
					<div>
						<label for="cities">Usługi <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Lekarze <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>

					<div>
						<label for="cities">Pora dnia <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div class="row search-period-container">
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Cały dzień
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Do 11:00
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								11:00 - 16:00
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Po 16:00
							</button>
						</div>
					</div>
				</div>


				<div class="col-md-4 col-xs-12">
					<div>
						<label for="cities">Pakiet <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Język <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div class="search-container">
						<input type="submit" id="reservationSearchButton" value="Szukaj">
					</div>
				</div>
			</div>
		</form>
	</div>

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
		integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
		integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
		integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
		crossorigin="anonymous"></script>
</body>

</html>

css

/* * {
	margin: 5px;
} */

.reservation {
	margin-bottom: 50px;
}

.box {
	background-color: #0066ff;
	border-radius: 3px;
	color: white;
}
form {
	display: flex;
  flex-direction: column;
}

#term input[type="checkbox"] {
	display: none;
  }
  
#term span {
	width: 100%;
	display: inline-block;
	padding: 10px;
	border: 2px solid gold;
	border-radius: 3px;
	color: black;
  }
  
#term input[type="checkbox"]:checked + span {
	  
  background-color: gold;
	color: black;
  }

  .term {
	  width: 46%;
  }

  .btn {
	  width: 100%;
	  background: white
	  ;
  }

  .search-containter{
	display: inline-block;
    width: 100%;
    margin-top: 62px;
  }
  .search-containter input {
	  /* position: absolute;
	  bottom: 0; */
	  /* align-self: flex-end; */
  }
3

w html masz search-container a w css deklarujesz klasę search-containter ;)

1

Wrzuć na https://codepen.io/pen/ Łatwiej będzie grzebać.

0

Przecież podałem rozwiązanie, ja pier... :D

0

mam tu jeszcze taki problem, że jak zwijam stronę to ten button gdzie jest inny zakres zwija się, co zrobić by tego nie było? Tu mam też link do code pen, ale jakoś to nie wygląda tak jak w przeglądarce https://codepen.io/krystianwojt/pen/OJMagRp

<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
		integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>

	<title>Hello, world!</title>
</head>

<body>
	<div class="container reservationBox">
		<div class="row">
			<div class="col-sm reservation">
				<h1>Zarezerwuj wizytę lub badanie</h1>
			</div>
		</div>
		<form action="/action_page.php">
			<div class="row box">
				<div class="col-md-4 col-xs-12">
					<!-- <form action="/action_page.php"> -->
					<div>
						<label for="cities">Miasto <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Placówka <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Termin <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div class="row search-period-container">
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item active" data-period="3">
								<label>3 dni</label>
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								<label>15 dni</label>
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								<label>30 dni</label>
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								<label>Inny zakres <i class="fa fa-calendar" aria-hidden="true"></i></labe>
							</button>
						</div>
					</div>
				</div>


				<div class="col-md-4 col-xs-12">
					<div>
						<label for="cities">Usługi <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Lekarze <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>

					<div>
						<label for="cities">Pora dnia <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div class="row search-period-container">
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Cały dzień
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Do 11:00
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								11:00 - 16:00
							</button>
						</div>
						<div class="col-sm-6 col-xs-12">
							<button type="button" class="btn search-period-item" data-period="3">
								Po 16:00
							</button>
						</div>
					</div>
				</div>


				<div class="col-md-4 col-xs-12">
					<div>
						<label for="cities">Pakiet <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div>
						<label for="cities">Język <i class="fa fa-question-circle" aria-hidden="true"></i></label>
					</div>
					<div>
						<select id="cities" name="cities">
							<option value="volvo">Volvo XC90</option>
							<option value="saab">Saab 95</option>
							<option value="mercedes">Mercedes SLK</option>
							<option value="audi">Audi TT</option>
						</select>
					</div>
					<div class="search-container">
						<input type="submit" class="button search" id="reservationSearchButton" value="Szukaj">
					</div>
				</div>
			</div>
		</form>
	</div>
	<script>
		let outside = document.getElementsByClassName('col-sm-6');
		let inside = document.getElementsByClassName('search-period-item');

		inside.forEach(el => {
			el.addEventListerer('click', function () {
				outside.querySelector('.active').classList.remove('active');
				el.classList.add('active');
			})
		})

	</script>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
		integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
		integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
		integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
		crossorigin="anonymous"></script>
</body>

</html>

css

.reservation {
	margin: 5px;
}

.box {
	padding: 5px;
}

.reservation {
	margin-bottom: 50px;
}

.search-period-item {
	margin: 0 0 4px;
	height: 38px;
	font-size: 12px;
}

.box {
	background-color: #0066ff;
	border-radius: 3px;
	color: white;
}
form {
	display: flex;
  flex-direction: column;
}

#term input[type="checkbox"] {
	display: none;
  }
  
#term span {
	width: 100%;
	display: inline-block;
	padding: 10px;
	border: 2px solid gold;
	border-radius: 3px;
	color: black;
  }
  
#term input[type="checkbox"]:checked + span {
	  
  background-color: gold;
	color: black;
  }

  .term {
	  width: 46%;
  }

  .btn {
	  width: 100%;
	  background: white
	  ;
  }

  .search-container{
	  height: 116px;
  }
  .search-container input {
	  margin-top: 86px;
  }

  .button.search {
	  background-color: green;
  }
  
  select {
	  width: 100%;
  }

  .search-period-item.active {
	background: #95b3d6;
  }

1 użytkowników online, w tym zalogowanych: 0, gości: 1