CSS yardım div responsive

Question

tam ekranda normal gözüküyor fakat

ekranı küçülttüğümde bu şekilde gözüküyor büyük olan divin ekran boyuna göre uzamasını nasıl sağlarım ?

angelicmoon · Answer

hocam dive display:flex ekleyin.

oguzhanss · Answer

angelicmoon adlı üyeden alıntı:						mesajı görüntüle									hocam dive display:flex ekleyin. 		hocam yine aşağı attı divi

ZFC · Answer

oguzhanss adlı üyeden alıntı:						mesajı görüntüle									hocam yine aşağı attı divi 		Float mı verdiniz flex mi kulandınız? Width height ne durumda? Kod eklerseniz daha çok yardımcı olabiliriz.

AspavA · Answer

Kod paylaşırsanız yardımcı olabiliriz

eğer kodlarınızda media seçiciler yoksa media seçiciler ile ekranlara göre boyutlarla oynamanız daha sağlıklı olur

oguzhanss · Answer

.profile2{
   min-width: 60%;
   width: auto;
   float: left;
  margin-top: 5%;
  background-color: #6651FF;
  margin-left: 5px;
  min-height: 590px;
  height: auto;
  border: 5px solid white;
  border-radius: 20px;
  margin-left: 100px;
  }
@media only screen and (max-width: 768px) {
  &#91;class*="profile2"&#93; {
     margin-top: 15px;
     
     width: 100%;

margin-left: 1px;
     margin-right: 1px;

}

AspavA · Answer

oguzhanss adlı üyeden alıntı:						mesajı görüntüle									  .profile2{
   min-width: 60%;
   width: auto;
   float: left;
  margin-top: 5%;
  background-color: #6651FF;
  margin-left: 5px;
  min-height: 590px;
  height: auto;
  border: 5px solid white;
  border-radius: 20px;
  margin-left: 100px;
  }
@media only screen and (max-width: 768px) {
  &#91;class*="profile2"&#93; {
     margin-top: 15px;
    
     width: 100%;

margin-left: 1px;
     margin-right: 1px;

} 		
orada iki ayrı div var sen tek div css sini vermişsin

angelicmoon · Answer

<head>
<style>
.container {

display:flex;
align-items:center;
width:100%;

}

.kutu1{
width:60px;
height:250px;
background-color:purple;
margin-right:30px;

}

.kutu2{
width:calc(100% - 60px);
height:250px;
background-color:purple;

}

</style>
<body>
<div class="container">
<div class="kutu1">Kutu1</div>

</div>
</body>
</head>

oguzhanss · Answer

oguzhanss adlı üyeden alıntı:						mesajı görüntüle									  .profile2{
   min-width: 60%;
   width: auto;
   float: left;
  margin-top: 5%;
  background-color: #6651FF;
  margin-left: 5px;
  min-height: 590px;
  height: auto;
  border: 5px solid white;
  border-radius: 20px;
  margin-left: 100px;
  }
@media only screen and (max-width: 768px) {
  &#91;class*="profile2"&#93; {
     margin-top: 15px;
    
     width: 100%;

margin-left: 1px;
     margin-right: 1px;

} 								AspavA adlı üyeden alıntı:						mesajı görüntüle									Kod paylaşırsanız yardımcı olabiliriz

eğer kodlarınızda media seçiciler yoksa media seçiciler ile ekranlara göre boyutlarla oynamanız daha sağlıklı olur

.profile2{
   min-width: 60%;
   width: auto;
   float: left;
  margin-top: 5%;
  background-color: #6651FF;
  margin-left: 5px;
  min-height: 590px;
  height: auto;
  border: 5px solid white;
  border-radius: 20px;
  margin-left: 100px;
  }
@media only screen and (max-width: 768px) {
  &#91;class*="profile2"&#93; {
     margin-top: 15px;
    
     width: 100%;

margin-left: 1px;
     margin-right: 1px;

}
.profile{
  float: left;
  
  margin-top: 5%;
  background-color: #6651FF;
  margin-left: 5px;
  width: 250px;
  height: 590px;
  border: 5px solid white;
  border-radius: 20px;
  margin-left: 100px;

}
 @media only screen and (max-width: 768px) {
  &#91;class*="profile"&#93; {
     margin-top: 15px;
     
     width: 100%;

margin-left: 1px;
     margin-right: 1px;

}

Retreat · Answer

.container { display:flex; flex-wrap: wrap}
.sidebar { flex: .5}
.content { flex: 1.5}

şeklinde denersen düzelecektir, sidebar ve content'in flex boyutlarını duruma göre ayarlayabilirsin.

oguzhanss · Answer

angelicmoon adlı üyeden alıntı: mesajı görüntüle

Kutu1

Kutu2

hocam 1. div sabit 2. divin enlemesine ekran boyna göre uzayacak aşağı kaymayacak

angelicmoon · Answer

oguzhanss adlı üyeden alıntı:						mesajı görüntüle									hocam 1. div sabit 2. divin enlemesine ekran boyna göre uzayacak aşağı kaymayacak 		Ekran küçüldüğünde diyorsun enine ekran boyuna uzayacak diyorsun anlayamadım 
Hocam şimdi ekran küçüldüğünde sağdaki kutu aşağı doğru mu uzayacak onu mu istiyorsun ? Yoksa kısaldıkça ekranın sağına doğru enlemesine mi ?
Edit:Özelden anydesk at

brown · Answer