Küçük bi HTML sorunu - Bakar mısınız?

21-10-2024, 21:44:29

Arkadaşlar aşağıdaki kodda her şey güzel görünürken sayfaya telefonda baktığımda görsel kesiliyor. Kodda nereyi yanlış yapıyorum?

<div style="display: flex; align-items: center; padding: 0;">
<div style="position: relative; background-color: #d3d3d3; border-radius: 10px; padding: 10px 20px; color: black; width: 100%; margin-right: 20px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis placeat nobis corporis eos voluptas molestiae deserunt quam facere iste quasi laboriosam similique autem consequatur aspernatur quas dignissimos, in, necessitatibus accusantium.
<div style="content: ''; position: absolute; top: 50%; right: -20px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent #d3d3d3; transform: translateY(-50%);">&nbsp;</div>
</div>

<div style="width: 150px; height: 150px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 8px; overflow: hidden; margin: 0; padding: 0;"><img alt="Görsel" height="350" src="/images/uploaded/bitki.jpg" style="width: 150px; height: 150px; object-fit: cover;" width="320" /></div>

21-10-2024, 21:46:00

#2

~~angelicmoon~~

Üyeliği durduruldu

Mobilde küçülttüğünüzde ikisini yan yana tutmayın. Biri yukarda diğeri aşağıda olsun.

21-10-2024, 21:46:43

#3

xelibri

<div style="display: flex; align-items: center; padding: 0; flex-wrap: wrap;">
  <div style="position: relative; background-color: #d3d3d3; border-radius: 10px; padding: 10px 20px; color: black; flex: 1 1 300px; margin-bottom: 20px;">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis placeat nobis corporis eos voluptas molestiae deserunt quam facere iste quasi laboriosam similique autem consequatur aspernatur quas dignissimos, in, necessitatibus accusantium.
    <div style="content: ''; position: absolute; bottom: -20px; left: 50%; border-width: 10px; border-style: solid; border-color: #d3d3d3 transparent transparent transparent; transform: translateX(-50%);">&nbsp;</div>
  </div>
   
  <div style="width: 100%; max-width: 150px; height: 150px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 8px; overflow: hidden; margin: 0; padding: 0;">
    <img alt="Görsel" src="/images/uploaded/bitki.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
  </div>
</div>

<style>
  @media (max-width: 600px) {
    div[style*="display: flex"] {
      flex-direction: column;
      align-items: center;
    }
    div[style*="position: relative"] {
      width: 100%;
      margin-right: 0;
      margin-bottom: 40px;
    }
    div[style*="width: 100%; max-width: 150px"] {
      margin-top: 20px;
    }
  }
</style>

21-10-2024, 21:51:35

#4

Said5841

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

Arkadaşlar aşağıdaki kodda her şey güzel görünürken sayfaya telefonda baktığımda görsel kesiliyor. Kodda nereyi yanlış yapıyorum?

<div style="display: flex; align-items: center; padding: 0;">
<div style="position: relative; background-color: #d3d3d3; border-radius: 10px; padding: 10px 20px; color: black; width: 100%; margin-right: 20px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis placeat nobis corporis eos voluptas molestiae deserunt quam facere iste quasi laboriosam similique autem consequatur aspernatur quas dignissimos, in, necessitatibus accusantium.
<div style="content: ''; position: absolute; top: 50%; right: -20px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent #d3d3d3; transform: translateY(-50%);">&nbsp;</div>
</div>

<div style="width: 150px; height: 150px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 8px; overflow: hidden; margin: 0; padding: 0;"><img alt="Görsel" height="350" src="/images/uploaded/bitki.jpg" style="width: 150px; height: 150px; object-fit: cover;" width="320" /></div>

angelicmoon hocamın dediği gibi yan yana yerine alt alta deneyin, telefonun boyutundan dolayı kesiliyordur yer yok çünkü.

21-10-2024, 21:52:05

#5

KupeliHoca

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

<div style="display: flex; align-items: center; padding: 0; flex-wrap: wrap;">
  <div style="position: relative; background-color: #d3d3d3; border-radius: 10px; padding: 10px 20px; color: black; flex: 1 1 300px; margin-bottom: 20px;">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis placeat nobis corporis eos voluptas molestiae deserunt quam facere iste quasi laboriosam similique autem consequatur aspernatur quas dignissimos, in, necessitatibus accusantium.
    <div style="content: ''; position: absolute; bottom: -20px; left: 50%; border-width: 10px; border-style: solid; border-color: #d3d3d3 transparent transparent transparent; transform: translateX(-50%);">&nbsp;</div>
  </div>
  
  <div style="width: 100%; max-width: 150px; height: 150px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 8px; overflow: hidden; margin: 0; padding: 0;">
    <img alt="Görsel" src="/images/uploaded/bitki.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
  </div>
</div>

<style>
  @media (max-width: 600px) {
    div[style*="display: flex"] {
      flex-direction: column;
      align-items: center;
    }
    div[style*="position: relative"] {
      width: 100%;
      margin-right: 0;
      margin-bottom: 40px;
    }
    div[style*="width: 100%; max-width: 150px"] {
      margin-top: 20px;
    }
  }
</style>

Çok teşekkür ederim. Hiç böyle düşünmemiştim.