@media (max-width: 1100px) { .post-title { font-size: 1.8rem; } .tag { font-size: 1rem; } } @media (max-width: 1000px) { .pagewithsidebar { flex-direction: column; } .pagewithsidebar .left-section, .pagewithsidebar .right-section { width: 100%; } .comment-meta { flex-direction: column; } .heading-secondary { font-size: 2.4rem; margin-bottom: 3.6rem; } .section-posts { padding: 3.6rem 0; } .grid--footer { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .grid--3-cols { grid-template-columns: repeat(2, 1fr); } .post-title { font-size: 2rem; } .tag { font-size: 1.2rem; } .btn-mobile-nav { display: block; z-index: 9999; } .main-nav { background-color: rgba(255, 255, 255, 0.945); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(5px); -moz-backdrop-filter: blur(10px); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transform: translateX(100%); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; visibility: hidden; transition: all 0.5s ease-out; z-index: 999; } .nav-open .main-nav { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(0%); } .navbar-nav { flex-direction: column; gap: 4.8rem; } /* header .main-navbar .navbar-nav li a, header .main-navbar div.menuon ul li a { padding: 10px 20px !important; font-size: 3rem; font-weight: 400; color: #1e2f41; display: block; border-radius: 4px !important; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; text-decoration: none; } */ .nav-open .icon-mobile-nav[name="close-outline"] { display: block; } .nav-open .icon-mobile-nav[name="menu-outline"] { display: none; } } @media (max-width: 760px) { .mailpoet_form { display: block !important; } .hero { display: flex; flex-direction: column-reverse; gap: 1.2rem; padding: 0 1.2rem; } .navbar-nav { flex-direction: column; gap: 1.8rem; } header .main-navbar .navbar-nav li a, header .main-navbar div.menuon ul li a { font-size: 2rem; } .container { padding: 0 1.2rem; } .header-container { padding: 0 1.8rem; } .single-post-content { padding: 5.6rem 1.2rem !important; background: white; border-radius: 10px; margin-top: 2rem; } .heading-secondary { font-size: 2.2rem; margin-bottom: 3.6rem; } .section-posts { padding: 3.6rem 0; } .grid--footer { grid-template-columns: 1.5fr 1.5fr 1fr; } .post-title { font-size: 1.6rem; } .tag { font-size: 1.2rem; } .author span { font-size: 1.2rem; } .comment-count { font-size: 1.2rem; } .main-nav-list { flex-direction: column; gap: 3.8rem; } .main-nav-link:link, .main-nav-link:visited { font-size: 2.8rem; } } @media (max-width: 610px) { .heading-secondary { font-size: 2.2rem; margin-bottom: 3.6rem; } .section-posts { padding: 3.6rem 0; } .grid--footer { grid-template-columns: 1.5fr 1.5fr; } .grid--3-cols { grid-template-columns: repeat(1, 1fr); } .post-title { font-size: 2rem; } .tag { font-size: 1.2rem; } .author span { font-size: 1.6rem; } .comment-count { font-size: 1.6rem; } .main-nav-list { flex-direction: column; gap: 3.8rem; } .main-nav-link:link, .main-nav-link:visited { font-size: 2.6rem; } } @media (max-width: 520px) { h1, h2, h3, h4, h5, h6 { font-size: 2.8rem; line-height: 1.35; font-weight: 400; } .entry-content { font-size: 2rem; } .section-comment a { font-size: 1.7rem; } .section-comment h2 { font-size: 1.7rem; } .section-comment h3 { font-size: 1.7rem; } .section-comment h4 { font-size: 1.7rem; } .section-comment label { font-size: 1.7rem; } .breadcrumbs { font-size:1.4rem; padding:5px 20px; } .breadcrumbs a { font-size:1.4rem; } .post-container { margin-left:1rem; margin-right:1rem; margin-top:1rem; margin-bottom:1rem; } .top-bar { flex-direction: column; gap: 1.4rem; height: auto; padding: 1.4rem; } .heading-secondary { font-size: 2.2rem; margin-bottom: 3.6rem; } .main-nav-list { flex-direction: column; gap: 3.8rem; } .main-nav-link:link, .main-nav-link:visited { font-size: 2.4rem; } .section-posts { padding: 3.6rem 0; } .grid--footer { grid-template-columns: 1fr; text-align: center; } .single-entry-meta { display: flex; justify-content: space-between; } .social-links { justify-content: center; } .grid { row-gap: 4.4rem; } .single-post-content { padding: 5.6rem 3.2rem; } .single-post-title { font-size: 2.8rem; } .single-entry-meta span { font-size: 1.6rem; margin-right: 5px; display: inline-block; } .author-box { padding: 30px 15px; } .author-box-title { font-size: 1.5rem; } .toggle { left:-48px; } }