/* ================================
Starmag Theme Responsive Template
================================== */
/* GENERAL CONTENT AREA */
.container, .site-content, .content-area {
max-width: 1200px; /* Content width */
margin: 0 auto;
padding: 0 15px;
}
/* 1) Large Desktop (1200px and above) */
@media (min-width: 1200px) {
body {
font-size: 18px;
}
.main-sidebar {
width: 28%; /* Sidebar is a bit narrow */
}
.content-area {
width: 72%;
}
}
@media (max-width: 768px) {
/* Menü bağlantıları */
.main-navigation a {
display: inline-block;
min-width: 48px;
min-height: 48px;
padding: 12px 18px;
margin-right: 8px;
}
/* Butonlar */
button,
input[type=”button”],
input[type=”submit”],
.wp-block-button__link {
min-width: 48px;
min-height: 48px;
padding: 12px 20px;
margin: 6px;
}
/* Sosyal medya ikonları */
.social-icons a,
.social-menu a {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
min-width: 48px;
min-height: 48px;
margin: 6px;
}
/* Kategori linkleri */
.category-list a {
display: block;
min-height: 48px;
padding: 10px 14px;
margin-bottom: 6px;
}
}
/* 2) Small Desktop (992px – 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
body {
font-size: 17px;
}
.main-sidebar {
width: 30%;
}
.content-area {
width: 70%;
}
}
/* 3) Tablet (768px – 991px) */
@media (max-width: 991px) and (min-width: 768px) {
body {
font-size: 16px;
}
.main-sidebar {
display:none; /* Sidebar for tablet is hidden */
}
.content-area {
width: 100%;
}
.site-header nav ul {
display:flex;
flex-wrap: wrap;
justify-content: center;
}
}
/* 4) Large Mobile (576px – 767px) */
@media (max-width: 767px) and (min-width: 576px) {
body {
font-size: 15px;
line-height: 1.6;
}
.site-header {
text-align: center;
}
.site-header nav ul {
display:block; /* Menu vertical */
}
.post-thumbnail img {
max-height: 250px;
object-fit: cover;
}
}
/* 5) Small Mobile (575px and below) */
@media (max-width: 575px) {
body {
font-size: 14px;
line-height: 1.6;
}
.site-header {
text-align: center;
}
.site-header nav {
display:none; /* Hamburger menu should be used */
}
.post-thumbnail img {
max-height: 180px;
object-fit: cover;
}
.entry-title {
font-size: 18px;
}
