CSS responsive card yapısı ve içeriği

Selamlar, bir div yapısı oluşturdum fakat içerisinde ki ögeler sürekli taşma yaratıyor. position ayarlanmadığı için bir türlü yapamıyorum. react kullanıyorum. class mantığı farklı işliyor. Eklediğim 2 tane png divin altında gözüküyor bir türlü çıkmıyor. absolute yaptığımda responsive olmuyor bu konu da neler yapabilirim ?

Merhaba, divin altında kalmamış #adstext'in altında kalmış. Anydesk verirseniz yada kodları atarsanız düzenleme yapabilirim

adstext'e background verdiğin için bu sorunu yaşıyorsun muhtemelen zaten kapsayıcı div'de background var, yazı alanının bg'sini transparent geçebilirsin.

React'da, bir div yapısı oluşturmak için aşağıdaki gibi bir komponent oluşturabilirsiniz:

import React from 'react';

function MyDiv() {
return (
<div>
<p>I am a paragraph inside a div.</p>
<img src="my-image.png" alt="My Image" />
</div>
);
}

export default MyDiv;

Bu div içerisinde ki ögelerin taşma sorununu çözmek için, CSS kullanarak div'in pozisyonunu ve ölçülerini ayarlayabilirsiniz. Örneğin, aşağıdaki gibi bir CSS kullanarak div'i tam ekran genişliğinde ve yüksekliğinde yapabilirsiniz:

.my-div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bu CSS'i, div'in classı olarak atayarak div'i stilleyebilirsiniz:

import React from 'react';
import './MyDiv.css';

function MyDiv() {
return (
<div className="my-div">
<p>I am a paragraph inside a div.</p>
<img src="my-image.png" alt="My Image" />
</div>
);
}

export default MyDiv;

Div'in pozisyonunu "absolute" olarak ayarladığınızda, div responsive olmayacaktır. Bu nedenle, eğer div'in responsive olmasını istiyorsanız, "relative" veya "fixed" gibi başka bir pozisyon değerini kullanabilirsiniz.
Ayrıca, div içerisinde ki ögelerin yerleşimini düzenlemek için, div içerisinde ki ögelerin pozisyonlarını ve ölçülerini de ayarlayabilirsiniz. Örneğin, aşağıdaki gibi bir CSS kullanarak div içerisinde ki iki resmin yatay olarak yan yana yerleştirileceğini belirtebilirsiniz:

.my-div img {
display: inline-block;
width: 50%;
}

Bu şekilde, div içerisinde ki iki resim yatay olarak yan yana yerleşecek ve div'in genişliğine göre otomatik olarak ölçekleneceklerdir.

Eğer div içerisinde ki ögelerin taşma sorununu çözmek için daha fazla özelleştirme yapmak isterseniz, div içerisinde ki ögelerin pozisyonunu ve ölçülerini daha ayrıntılı bir şekilde ayarlayabilirsiniz. Örneğin, aşağıdaki gibi bir CSS kullanarak div içerisinde ki iki resmin yatay olarak yan yana yerleştirileceğini ve div'in yüksekliğinden aşağı taşmayacak şekilde ayarlayabilirsiniz:

.my-div {
position: relative;
}

.my-div img {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}

.my-div img:first-child {
left: 0;
}

.my-div img:last-child {
right: 0;
}

Bu şekilde, div içerisinde ki iki resim yatay olarak yan yana yerleşecek ve div'in yüksekliğinden aşağı taşmayacak şekilde ayarlanacaklardır.
Ayrıca, div içerisinde ki ögelerin yerleşimini düzenlemek için diğer seçenekler de mevcuttur. Örneğin, Flexbox veya Grid gibi CSS layout sistemlerini kullanarak div içerisinde ki ögelerin yerleşimini daha esnek bir şekilde ayarlayabilirsiniz.
React'ta bu tür CSS ayarlarını uygulamak için, div'e class atayarak veya inline stil olarak CSS ayarlarını uygulayabilirsiniz. Örneğin:

import React from 'react';

function MyDiv() {
return (
<div style={{ position: 'relative' }}>
<img style={{ position: 'absolute', top: 0, bottom: 0, width: '50%' }} src="my-image-1.png" alt="My Image 1" />
<img style={{ position: 'absolute', top: 0, bottom: 0, width: '50%' }} src="my-image-2.png" alt="My Image 2" />
</div>
);
}

export default MyDiv;

Umarım bu bilgiler size yardımcı olmuştur ve div içerisinde ki ögelerin taşma sorununu çözmenize yardımcı olmuştur. Eğer daha fazla yardıma ihtiyacınız olursa, yazarsınız. Bol bol örnekle açıkladım kendinize göre düzenleyin.

Tahminimce; ,ki görüntüyü ve metni #adsframeöğenin içine yerleştirmeye çalışıyorsunuz, ancak positionbu öğelerin hiçbiri için özellik ayarlanmamış. Aşağıda ki kodu CSS'ne ekle bakalım nasıl olacak dene bir kere...

@media (max-width: 767px) {  #adsframe {    position: relative;  } }

Belki de duruma ek olarak nasıl uygulanabileceği için biraz sistemde değişiklik yaparaktan şu şekilde kodu uyarladım deneyebilirsin: https://codepen.io/razooooor002/pen/bGjErKW