/* ===================================================== GROWINGMINDSET888 RESPONSIVE.CSS PART 1 ===================================================== */ /* ========================================== 1400px ========================================== */ @media screen and (max-width:1400px){ .container{ max-width:1200px; } } /* ========================================== 1200px ========================================== */ @media screen and (max-width:1200px){ .container{ width:92%; } h1{ font-size:48px; } h2{ font-size:36px; } h3{ font-size:22px; } p{ font-size:17px; } section{ padding:90px 0; } } /* ========================================== 1024px ========================================== */ @media screen and (max-width:1024px){ .container{ width:94%; } /* HEADER */ header .container{ padding:18px 0; } .logo{ font-size:24px; } nav ul{ gap:20px; } /* HERO */ #hero{ padding:100px 0; } #hero h1{ font-size:42px; } #hero p{ font-size:17px; max-width:700px; } /* SECTION */ section{ padding:80px 0; } /* BUTTON */ .btn{ padding:15px 30px; font-size:16px; } } /* ========================================== 900px ========================================== */ @media screen and (max-width:900px){ h1{ font-size:40px; } h2{ font-size:32px; } h3{ font-size:22px; } p{ font-size:16px; } section{ padding:70px 0; } } /* ========================================== 768px ========================================== */ @media screen and (max-width:768px){ /* CONTAINER */ .container{ width:92%; } /* HEADER */ header{ position:relative; } header .container{ flex-direction:row; align-items:center; } /* LOGO */ .logo{ margin-bottom:20px; } /* NAV */ nav{ width:100%; } nav ul{ flex-direction:column; gap:15px; text-align:center; } /* HERO */ #hero{ padding:70px 0; } #hero h1{ font-size:36px; } #hero p{ font-size:16px; } /* SECTION */ section{ padding:60px 0; } /* BUTTON */ .btn{ display:inline-block; width:auto; } /* IMAGE */ img{ width:100%; height:auto; } } /* ========================================== 600px ========================================== */ @media screen and (max-width:600px){ .container{ width:94%; } h1{ font-size:32px; } h2{ font-size:28px; } h3{ font-size:20px; } p{ font-size:15px; } .btn{ width:100%; text-align:center; } section{ padding:55px 0; } } /* ========================================== 480px ========================================== */ @media screen and (max-width:480px){ .container{ width:95%; } header .container{ padding:16px 0; } .logo{ font-size:22px; } #hero{ padding:60px 0; } #hero h1{ font-size:30px; line-height:1.3; } #hero p{ font-size:15px; margin:20px auto; } .btn{ padding:15px; font-size:15px; } h2{ font-size:24px; } h3{ font-size:18px; } section{ padding:50px 0; } } /* ========================================== 360px ========================================== */ @media screen and (max-width:360px){ .container{ width:96%; } h1{ font-size:26px; } h2{ font-size:22px; } h3{ font-size:17px; } p{ font-size:14px; } .logo{ font-size:20px; } .btn{ font-size:14px; padding:14px; } } /* ===================================================== GROWINGMINDSET888 RESPONSIVE.CSS PART 2 ===================================================== */ /* ========================================== BOOK GRID ========================================== */ @media screen and (max-width:1200px){ .book-grid{ grid-template-columns:repeat(2,1fr); gap:30px; } .book-card img{ height:auto; } } @media screen and (max-width:768px){ .book-grid{ grid-template-columns:1fr; gap:30px; } .book-card{ max-width:500px; margin:auto; } .book-card img{ height:auto; } .book-card h3{ font-size:24px; } .book-card p{ font-size:16px; } } @media screen and (max-width:480px){ .book-card{ border-radius:12px; } .book-card h3{ font-size:22px; } .book-card p{ font-size:15px; } .book-card a{ width:100%; text-align:center; } } /* ========================================== BLOG GRID ========================================== */ @media screen and (max-width:1200px){ .blog-grid{ grid-template-columns:repeat(2,1fr); gap:25px; } } @media screen and (max-width:768px){ .blog-grid{ grid-template-columns:1fr; } .blog-grid article{ max-width:600px; } } @media screen and (max-width:480px){ .blog-grid article{ padding:22px; } .blog-grid h3{ font-size:22px; } .blog-grid p{ font-size:15px; } } /* ========================================== CONTACT ========================================== */ @media screen and (max-width:992px){ .contact-wrapper{ grid-template-columns:1fr; gap:40px; } } @media screen and (max-width:768px){ .contact-info{ text-align:center; } .contact-form{ width:100%; } .contact-form input{ width:100%; } .contact-form textarea{ width:100%; } .contact-form button{ width:100%; } } @media screen and (max-width:480px){ .contact-wrapper{ gap:30px; } .contact-form input{ padding:14px; } .contact-form textarea{ padding:14px; } } /* ========================================== CTA ========================================== */ @media screen and (max-width:768px){ #cta{ text-align:center; } #cta h2{ font-size:30px; } } @media screen and (max-width:480px){ #cta h2{ font-size:24px; } } /* ========================================== FOOTER ========================================== */ @media screen and (max-width:768px){ footer{ text-align:center; } footer p{ font-size:15px; } } @media screen and (max-width:480px){ footer{ padding:35px 0; } } /* ========================================== IMAGE SECTION ========================================== */ @media screen and (max-width:768px){ section img{ width:100%; height:auto; } } /* ========================================== FLEX LAYOUT ========================================== */ @media screen and (max-width:768px){ .row{ flex-direction:column; } .column{ width:100%; } } /* ========================================== CARD SPACING ========================================== */ @media screen and (max-width:768px){ .book-card, .blog-grid article{ margin-bottom:20px; } } /* ========================================== BUTTON ========================================== */ @media screen and (max-width:768px){ .btn{ display:block; width:100%; text-align:center; } } /* ========================================== TABLE ========================================== */ @media screen and (max-width:768px){ table{ display:block; overflow-x:auto; } } /* ========================================== IFRAME ========================================== */ @media screen and (max-width:768px){ iframe{ width:100%; } } /* ========================================== VIDEO ========================================== */ @media screen and (max-width:768px){ video{ width:100%; height:auto; } } /* ========================================== FORM ========================================== */ @media screen and (max-width:768px){ form{ width:100%; } input, textarea, select{ width:100%; } } /* ========================================== ICON ========================================== */ @media screen and (max-width:480px){ .icon{ width:40px; height:40px; } } /* ========================================== EXTRA SPACING ========================================== */ @media screen and (max-width:480px){ .book-card, .blog-grid article{ padding-bottom:10px; } } /*nav=============*/ @media(max-width:768px){ #menu-toggle{ display:block; background:none; border:none; font-size:32px; cursor:pointer; } nav{ display:none; width:100%; } nav.active{ display:block; } nav ul{ display:flex; flex-direction:column; gap:15px; background:#ffffff; padding:20px; margin-top:15px; border-radius:12px; } #navbar li{ text-align: left; } }