/* ==========================================================================
RESPONSIVE OVERRIDES — Shri Shivaji Science College
Link this AFTER css/style-new.css in , e.g.:
========================================================================== */
/* ---------- Global ---------- */
* { box-sizing: border-box; }
html, body {
max-width: 100%;
overflow-x: hidden;
font-family: cambria;
}
img { max-width: 100%; height: auto; }
/* ==========================================================================
TABLET (max-width: 991px)
========================================================================== */
@media (max-width: 991px) {
/* Top strip: stack the two halves */
.top-strip {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 8px 12px;
font-size: 12px;
justify-content:center;
}
.strip-left, .strip-right {
flex-wrap: wrap;
gap: 6px;
}
@media (max-width: 768px) {
.top-strip {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
padding: 8px 12px;
font-size: 12px;
}
.strip-left,
.strip-right {
width: 100%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 6px;
text-align: center;
}
}
/* Header Layout */
.header-side-logo {
display: flex;
justify-content: center;
align-items: center;
}
.header-side-logo img {
width: 150px;
height: auto;
}
/* College Name Area */
.header-center {
text-align: center;
}
.college-title {
text-align: center;
}
/* Mobile View */
@media (max-width: 768px) {
.header-side-logo {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.header-side-logo img {
width: 95px;
max-width: 95px;
height: auto;
}
.header-center {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
.college-title {
width: 100%;
padding: 0 15px;
text-align: center;
}
.college-title h5 {
font-size: 13px !important;
line-height: 20px;
margin: 0 0 5px;
text-align: center;
}
.college-title h1 {
font-size: 21px !important;
line-height: 28px;
margin: 5px 0;
text-align: center;
}
.subtitle {
font-size: 11px;
line-height: 17px;
text-align: center;
margin: 8px auto 0;
max-width: 330px;
justify-content: center;
}
/* Bootstrap columns full width */
.col-lg-6,
.col-md-6,
.col-lg-3,
.col-md-3 {
width:100%;
text-align:center;
}
}
/* Stats bar: 2 columns instead of 4 */
.stats-bar {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
text-align: center;
}
/* About section: stack columns */
.about-section {
display: flex;
flex-direction: column;
}
.about-images, .about-text-col, .notice-col {
width: 100%;
max-width: 100%;
}
/* Team & tile grids: fewer columns */
.team-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px;
}
.tiles-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px;
}
/* Events section: stack gallery + quick links */
.events-section .row {
flex-direction: column;
}
.events-section .col-md-8,
.events-section .col-md-4 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
/* Admission band: stack text + button */
.admission-band {
flex-direction: column;
text-align: center;
gap: 16px;
padding: 24px 16px;
}
/* Footer: stack columns */
.footer-top {
flex-direction: column;
gap: 24px;
}
.footer-brand, .footer-col {
width: 100%;
max-width: 100%;
}
}
/* ==========================================================================
MOBILE (max-width: 767px)
========================================================================== */
@media (max-width: 767px) {
/* Hide the fixed social sidebar on small screens (or dock it to bottom —
comment out the "display:none" block and use the bottom-dock block
instead if you'd rather keep it visible) */
.social-media-container {
display: none;
}
/* --- Alternative: bottom-docked social bar instead of hiding ---
.social-media-container {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: flex;
flex-direction: row;
z-index: 999;
}
.social-media-container li {
flex: 1;
text-align: center;
}
.social-media-container li a { display: none; }
*/
/* Slider + video row: stack, and give the video a sane height */
.row.align-items-stretch { flex-direction: column; }
#top-video, #top-video video {
width: 100%;
height: auto;
max-height: 260px;
object-fit: cover;
}
/* Announcements marquee: smaller text, no overflow */
.announcements-bar {
flex-direction: column;
align-items: flex-start;
padding: 8px 12px;
}
.ann-content { font-size: 13px; }
/* Admission CTA button: full width, wrap text */
.admission-cta-top { padding: 12px; }
.btn-apply-now {
display: block;
width: 100%;
text-align: center;
white-space: normal;
line-height: 1.4;
padding: 12px 16px;
}
/* Stats bar: single column on phones */
.stats-bar {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 20px 12px;
}
.stat-num { font-size: 24px; }
.stat-label { font-size: 12px; }
/* Section headings: reduce size, add side padding */
.about-section, .team-section, .quicklinks-section,
.events-section, .admission-band {
padding-left: 16px;
padding-right: 16px;
}
.section-title-main { font-size: 22px; line-height: 1.3; }
/* Team grid: single column */
.team-grid {
grid-template-columns: 1fr !important;
}
/* Tiles grid: 2 columns */
.tiles-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px;
}
.tile-card { padding: 14px 8px; }
.tile-label { font-size: 12px; }
/* Quick links grid (sidebar) */
.quick-links-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
/* Swiper gallery: shrink height so it doesn't dominate the screen */
.swiper-container.main-slider { height: 260px !important; }
.swiper-container.nav-slider { display: none; } /* thumb strip usually unusable on phones */
/* Admission band heading */
.admission-band h2 { font-size: 20px; }
.admission-band p { font-size: 14px; }
/* Footer map + address */
.footer-map { height: 180px; }
address { font-size: 13px; }
/* Popup: fit inside viewport with room to scroll */
.popup {
width: 92%;
max-width: 92%;
max-height: 85vh;
overflow-y: auto;
}
}
/* ==========================================================================
SMALL MOBILE (max-width: 420px)
========================================================================== */
@media (max-width: 420px) {
.tiles-grid,
.quick-links-grid {
grid-template-columns: 1fr !important;
}
.stats-bar {
grid-template-columns: 1fr;
}
.section-title-main { font-size: 19px; }
}