Tamam dostum kafanı yorma biraz CSS öğren sonra tekrar dediklerime dön bak.
@media (max-width: 900px) {
span {
font-size: 15px;
}
}
Yani ters görünen yerleri @media etiketinin içinde max-width ayarlanmış şekilde hepsini seçip istediğin değerleri değiştiriceksin.
Bende yapman gerekeni form yapısına göre anlattım. benim .form-control yazdığım yere sana lazım olan sınıfı yazıcaksın.
CSS ile kendin ayarlıycaksın mesela form-control sınıfına sahip olanların width değerini düşürelim.
@media (max-width: 1000px) {
.form-control {
width: 100%;
}
}
@media (max-width: 900px) {
.form-control {
width: 90%;
}
}
@media (max-width: 800px) {
.form-control {
width: 80%;
}
}
max-width'in değeri cihazın genişliği ne kadarsa ona göre ayarlaması için. Mesela biz 1000px yazdık. Eğer cihaz 1000px veya aşağısıysa o uygulanacak.
Detaylı bir örnek: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Discord'unu yazabilirsen daha iyi olur benim için :)
* {
padding: 0;
margin: 0;
text-decoration: none;
font-family: arial, sans-serif;
}
h3 {
font-family: verdana;
}
.crypto-coins {
.crypto {
display: inline-block;
vertical-align: top;
margin: 20px;
background: #eee;
border-radius: 4px;
padding: 18px;
padding-bottom: 0;
box-shadow: 0 0 0 0.25rem #a0a0a0;
position: relative;
h3 {
text-align: center;
font-size: 24px;
}
a {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 93%;
text-align: center;
background: #06f;
color: #fff;
padding: 6px;
transition: 250ms bottom;
&:hover {
bottom: 10px;
}
}
&:hover a {
display: block;
}
}
}
<div class="crypto-coins">
<div class="crypto">
<h3>Bitcoin</h3>
<div class="money">18,245.4 USD</div>
<a href="#">Detayları Gör</a>
</div>
<div class="crypto">
<h3>Ethereum</h3>
<div class="money">598.296 USD</div>
<a href="#">Detayları Gör</a>
</div>
</div>
Dostum ne yaptığını tam anlamadım ancak yazarların ayrı bir tabloda olması gerekiyor. Yazar yazı yazdığında posts tablosuna gidicek ve orada author_id diye bir sütun olucak orayada yazarın idsini yazdırıcaksın ve WHERE koşulunada author_id='$author_id' olarak yaptırıcaksın. Bu genellikle tablo ilişkilendirme olarak geçiyor öğrenmek için aşağıda bıraktığım videoya bakabilirsin.
https://www.youtube.com/watch?v=8DzRAe6QyD8
<ul>
<?php
$user_id = $_GET['id'];
$posts = $db->query("SELECT * FROM posts WHERE user_id = '{$user_id}' ");
while ($post = $posts->fetch_assoc()) {
?>
<li>
<a href="post_detail?id=<?=$post['id']?>">
<?=$post['post_name']?>
</a>
</li>
<?php
}
?>
</ul>
<?php
if ($_POST) {
$keywords = $_POST['keywords'];
$keywords = explode(',', $keywords);
foreach ($keywords as $keyword) {
echo '#' . str_replace(' ', '', trim($keyword)) . '<br />';
}
}
?>
<form action="" method="post">
<textarea name="keywords">phpprogramlama, web sitesi yapma, web sayfası nasıl yapılır</textarea>
<button type="submit">Çıktı Al</button>
</form>
PHP ile bu şekilde yapılabilir ancak bunun çalışması bilgisayarunda xampp gibi programlar kurulu olması gerekir. PHP yerine Javascript ile yapsan daha mantıklı olur bence. Onunda yapılışını bırakıyorum.
<div id="tags"></div>
<form action="" method="post">
<textarea name="keywords">phpprogramlama, web sitesi yapma, web sayfası nasıl yapılır</textarea>
<button type="submit">Çıktı Al</button>
</form>
<script>
const form = document.querySelector('form'),
tags = document.querySelector('#tags');
form.addEventListener('submit', (e) => {
let keywords = form.querySelector('textarea[name=keywords]').value;
let output = keywords.split(',');
output.forEach((tag, indis) => {
let print = tag.trim().replaceAll(' ', '');
tags.innerHTML += `
#${print}<br />
`;
});
e.preventDefault();
});
</script>