Dostlar Merhaba, Html Details ile açılır kapanır bir metin gizleme olayı yapıyorum fakat, daha fazlasını oku dediğim de metnin tamamı gelmiyor div'in altında kalıyor sanki
Tam olarak nerede hata yapıyorum acaba ?
Görünmesi gereken hali
Görünen hali
<div class="gallery-item cookies">
<div class="grid-item-holder hov_zoom">
<a
href="images\menu\cookies_cinnamon_and_ginger_ale_cookie-min.png"
class="box-media-zoom popup-image"
><i class="fal fa-search"></i
></a>
<img
src="images\menu\cookies_cinnamon_and_ginger_ale_cookie-min.png"
alt=""
/>
</div>
<div class="grid-item-details">
<h3>Cinnamon and Ginger Ale ,cookie</h3>
<p>
Cookie powder mix
</p>
<details> <summary>Read more/less</summary> <p> (wheat flour, sugar, maltodextrin, corn starch, whey powder, leavening agents (sodium hydrogen carbonate, disodium diphosphate, monocalcium phosphate), emulsifier (mono- and diglycerides of fatty acids), salt, thickeners (sodium) carboxymethyl cellulose, xanthan gum, guar gum), flavoring (vanillin), colorant (beta carotene), vegetable margarine, egg, cinnamon, ginger. Allergen warning: Contains gluten, milk and its products, soy lecithin, egg. May contain traces of nuts and sesame." </p></details>
<div class="grid-item_price"></div>
</div>
</div>
css'ler bu şekilde
.grid-item-details {
float: left;
width: 100%;
padding: 20px;
border: 1px solid #eee;
background: #f9f9f9;
box-sizing: border-box;
}
.grid-item-details h3 {
display: block;
text-align: left;
padding-bottom: 12px;
color: #333;
font-size: 17px;
font-weight: 600;
position: relative;
}
.grid-item-details h3 a {
color: #333;
}
.grid-item-details h3 span {
position: absolute;
right: 0;
top: 6px;
font-family: "Playfair Display", cursive;
font-size: 12px;
font-style: italic;
}
.grid-item-details p {
text-align: left;
}