<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row" id="Mylists"> <!-- Dinamik içerik buraya eklenecek --> </div> </div>

/* Arka plan renkleri */ @media (max-width: 767px) { .habertext { font-size: 15px; color:blue; } } @media (min-width: 768px) and (max-width: 991px) { .habertext { font-size: 20px; color:red; } } @media (min-width: 992px) and (max-width: 1199px) { .habertext { font-size: 25px; color:green; } } @media (min-width: 1200px) { .habertext { font-size: 30px;color:purple; } } .row.display-flex { display: flex; flex-wrap: wrap; margin: 0 -15px; } .display-flex > [class*='col-'] { display: flex; flex-direction: column; margin-bottom: 30px; } .thumbnail { flex: 1 0 auto; display: flex; flex-direction: column; height: 100%; } .thumbnail img { width: 100%; object-fit: cover; /* Resmi kırparak hizala */ border-radius: 10px 10px 0 0; } .caption { flex: 1; display: flex; flex-direction: column; padding: 15px; } .caption h3 { font-size: 18px; margin-top: 0; margin-bottom: 10px; } .caption p { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .caption .btn-group { margin-top: auto; } /* Problemin çözümü burada başlıyor */ .post-content { background: transparent; top: 18%; left: 50%; position: absolute; transform: translateX(-50%); text-align: center; width: 70%; /* Resim ile aynı genişlikte olması için */ box-sizing: border-box; /* Padding'in genişliği artırmaması için */ padding: 0 15px; /* Yatayda boşluk bırakmak için */ } /* Problemin çözümü burada bitiyor */

$(document).ready(function() { var url = "https://muhittinbudak.github.io/oyaksorular/oyaksorular.json"; var mylistsRow = $("#Mylists"); $.ajax({ url: url, method: "GET", dataType: "json", success: function(data) { // id alanına göre azalan sıralama data.sort(function(a, b) { return parseInt(b.id) - parseInt(a.id); }); var htmlContent = ""; $.each(data, function(index, item) { var imageUrl = item.image ? item.image : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5eDNnbeYicApV0dWWrsfuoWSa3o_puXfMKcJb-Qi3Z7nGpNXD6iDk5R8pAmnH2EyIKZoyKtFpdW-0SgEgQcHdJqtUGarEp-cgT393My40oZQ9sy90YZBNDVU3l47nbz2SjmxfUEGAbzHS6icsS6BmT5cGMd72ma6QS8PkQug1hKMM4r1x2h6ookBsE-JP/s1600/oyak-back.jpg" + item.id; var title = item.question; var link = item.link; htmlContent += ` <div class="col-xs-12 col-sm-6 col-md-6"> <div class="thumbnail"> <img src="${imageUrl}" alt="${title}"> <div class="caption post-content"> <h2 class="habertext">${title}</h2> </div> <div class="caption"> <h3></h3> <p></p> <div class="btn-group"> <a href="${link}" style="font-size:21px" class="btn btn-lg btn-danger"> CEVABI GÖR <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> `; }); mylistsRow.html(htmlContent); }, error: function() { mylistsRow.html("<p>Veri yüklenirken bir hata oluştu.</p>"); } }); });