-2
Mobil ekran için farklı ve büyük ekranlar için farklı sınıf "stil" ve "range-selector" stilleri uygulamak istiyorum. Mobil CSS yaklaşımını kullandım. Ama işe yaramıyor. Lütfen bana nerede yanlış gittiğimi söyle. Bu benim css dosyasıdırneden medya sorgusu çalışmıyor
<div class="top-container">
<div class="search-form">
<form name="flight-search-form" class="flight-search-form">
<div>
<label>Flytin from: </label>
<input type="text" placeholder="Enter Origin City" required />
</div>
<div>
<label>Flytin to: </label>
<input type="text" placeholder="Enter Destination City" required />
</div>
<div>
<label>Departing: </label>
<input type="date" placeholder="Departure Date" required />
</div>
<div>
<label>No of passengers: </label>
<input type="number" placeholder="Passengers" required />
</div>
<input type="submit" value="Search" />
</form>
</div>
<div class="range-selector">
<label for="priceRange">
Price
</label>
<input type="range" name="priceRange" min="0" max="10000" step="500" class="price-selector pull-right">
</div>
</div>
- -
Bu
benim html dosyasıdır.top-container {
border: 1px solid;
padding: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.flight-search-form input {
display: block;
}
.search-form {
width: 100%;
border: 1px solid;
margin-bottom: 10px;
}
.range-selector {
width: 100%;
border: 1px solid;
}
.price-selector {
width: 100%;
}
@media only screen and (min-width: 768px) {
.search-form {
width: 60%;
border: 1px solid;
margin-bottom: 10px;
float: left;
color: red;
}
.range-selector {
width: 38%;
border: 1px solid;
float: right;
color: red;
}
}
Ne işe yaradığını belirsiz, çünkü iyi çalışıyor gibi görünüyor: https://jsfiddle.net/n5jjrajx/ (İki öğe için daha küçük ekranlar için kırmızı arka plan verdim ve mavi olanı daha büyük, böylece hemen olur görünür.) – CBroe
@CBroe, keman ile test yaptığınız için bir sayfa oluşturmayı deneyin ve ardından çalıştırın. –
@DanishAdeel: Neden bunun bir kemanın içinde olmasının aslında onunla bir ilgisi var? – CBroe