Daha fazla
- Cinsiyet
- Erkek
- Meslek
- PHP Developer
Merhaba arkadaşlar, pek bilgili değilim Bootstrap konusunda, yani işimi görebileceğim kadar biliyorum. Bugün bir yerde tıkandım yardımlarınızı bekliyorum.
Aşağıdaki gibi bir kodum var, istediklerimden bahsedeyim:
Koyulan fotoğraflar hangi boyutta olursa olsun fixlediğim bir boyutta görünsün. (biri büyük biri küçük durmasın yani)
Bir de görsel olarak göstereceğim;
Masaüstü görünümünde problem yok istediğim şekli verebildim.
Daha küçük ekranda da istediğim şekli verebildim bunda da problem yok.
Fakat ekran genişliği 575px'in altına düştüğünde fotoğraf altta kalıyor. 575px'in altına düştüğünde de üstteki gibi görmek istiyorum.
Ne yapmam gerekiyor? Yardımcı olur musunuz?
Aşağıdaki gibi bir kodum var, istediklerimden bahsedeyim:
Koyulan fotoğraflar hangi boyutta olursa olsun fixlediğim bir boyutta görünsün. (biri büyük biri küçük durmasın yani)
Bir de görsel olarak göstereceğim;
Masaüstü görünümünde problem yok istediğim şekli verebildim.
Daha küçük ekranda da istediğim şekli verebildim bunda da problem yok.
Fakat ekran genişliği 575px'in altına düştüğünde fotoğraf altta kalıyor. 575px'in altına düştüğünde de üstteki gibi görmek istiyorum.
Ne yapmam gerekiyor? Yardımcı olur musunuz?
HTML:
<div class="container-fluid mt-5">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="card mb-3 bg-gri">
<div class="row g-0">
<div class="col-md-5 col-sm-8 col-xs-8 order-md-1 order-sm-1">
<div class="card-body">
<h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 order-md-2 order-sm-2 align-self-end">
<div class="flex-container">
<p>tıkla</p>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<div class="col-md-6 col-sm-3 col-xs-3 order-md-3 order-sm-3">
<img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="max-width: 100%; height: auto;">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card mb-3 bg-gri">
<div class="row g-0">
<div class="col-md-5 col-sm-8 col-xs-8 order-md-1 order-sm-1">
<div class="card-body">
<h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 order-md-2 order-sm-2 align-self-end">
<div class="flex-container">
<p>tıkla</p>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<div class="col-md-6 col-sm-3 col-xs-3 order-md-3 order-sm-3">
<img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="max-width: 100%; height: auto;">
</div>
</div>
</div>
</div>
</div>
</div>