/* =================================== RESPONSIVE MOBILE CSS Add this to the end of section =================================== */ /* Mobile-First Responsive Overrides */ @media screen and (max-width: 768px) { /* Reset site width constraints */ body:not(.responsive) #SITE_CONTAINER, body:not(.responsive) #site-root, #masterPage, #SITE_HEADER, #PAGES_CONTAINER, #SITE_PAGES, #SITE_FOOTER { width: 100% !important; min-width: 100% !important; margin-left: 0 !important; left: 0 !important; } /* Remove fixed positioning and site-width calculations */ :root, :host { --site-width: 100%; } /* Header - Fixed positioning */ #SITE_HEADER { position: sticky !important; top: 0 !important; z-index: 1000 !important; background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; } /* Header Navigation - Hamburger Menu */ #comp-klt6q2lm { width: 100% !important; height: auto !important; position: relative !important; } /* Create hamburger menu button */ #comp-klt6q2lm::before { content: "☰"; display: block !important; font-size: 32px !important; padding: 15px !important; cursor: pointer !important; text-align: right !important; background: white !important; border-bottom: 1px solid #eee !important; } /* Hide menu by default */ #comp-klt6q2lm .y7qwii { display: none !important; flex-direction: column !important; width: 100% !important; text-align: center !important; background: white !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 999 !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease !important; height: 200px; /* added MD */ } /* Show menu when nav has focus-within (clicked/tapped) */ #comp-klt6q2lm:focus-within .y7qwii, #comp-klt6q2lmnavContainer:hover .y7qwii { display: flex !important; max-height: 400px !important; } /* Menu items styling */ #comp-klt6q2lm .xTjc1A { width: 100% !important; height: 50px !important; margin: 0 !important; position: relative !important; left: 0 !important; border-bottom: 1px solid #f0f0f0 !important; } #comp-klt6q2lm .xTjc1A:last-child { border-bottom: none !important; } /* Adjust header grid for mobile */ [data-mesh-id=SITE_HEADERinlineContent-gridContainer] > #comp-klt6q2lm { margin: 0 !important; left: 0 !important; width: 100% !important; } /* Add top padding to page content to account for fixed header */ #PAGES_CONTAINER { padding-top: 20px !important; } /* Page Container - Full width with padding */ #c1dmp { width: 100% !important; padding: 0 15px !important; box-sizing: border-box !important; } /* All Grid Containers - Convert to single column */ [data-mesh-id$="-gridContainer"] { grid-template-columns: 1fr !important; grid-template-rows: auto !important; padding: 0 15px !important; box-sizing: border-box !important; } /* Section 1 - About Section */ #comp-l7pxrpt1 { min-width: 100% !important; } [data-mesh-id=comp-l7pxrpt1inlineContent-gridContainer] > * { margin: 20px 0 10px 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; grid-area: auto !important; } /* Profile Image - Center and resize */ #comp-kmkurt7i { width: 250px !important; height: 250px !important; margin: 20px auto !important; left: 0 !important; display: block !important; } /* Text Elements - Full width */ #comp-klqs4iu4, #comp-ldf03i1k, #comp-klqs5sbs { width: 100% !important; max-width: 100% !important; padding: 0 10px !important; box-sizing: border-box !important; } #comp-klqs4iu4 h1 { font-size: 36px !important; } #comp-ldf03i1k h2 { font-size: 24px !important; } #comp-klqs5sbs p { font-size: 16px !important; } /* Section 2 - Skills Section */ #comp-ldf0chk6 { min-width: 100% !important; } [data-mesh-id=comp-ldf0chk6inlineContent-gridContainer] > * { margin: 20px auto 10px auto !important; left: 0 !important; width: 100% !important; max-width: 320px !important; grid-area: auto !important; text-align: center !important; } /* Skill Icons */ #comp-ldf0chmi, #comp-ldf0chn4, #comp-ldf0chnc { width: 100px !important; height: 100px !important; margin: 20px auto 10px auto !important; } /* Skill Titles and Descriptions */ #comp-ldf0chmt, #comp-ldf0chn7, #comp-ldf0chnf { width: 100% !important; max-width: 320px !important; text-align: center !important; } #comp-ldf0chn9, #comp-ldf0chn01, #comp-ldf0chni { width: 100% !important; max-width: 320px !important; text-align: center !important; padding: 0 15px !important; } #comp-ldf0chm3 { width: 100% !important; text-align: center !important; } /* Section 3 - Contact Section */ #comp-l7pxrpt11 { min-width: 100% !important; } [data-mesh-id=comp-l7pxrpt11inlineContent-gridContainer] > * { margin: 20px auto 10px auto !important; left: 0 !important; width: 100% !important; max-width: 320px !important; grid-area: auto !important; } #comp-ldf1dtee h2 { font-size: 28px !important; } #comp-ldf1f2qt p { font-size: 16px !important; } /* Email Button - Full width */ #comp-ldf1tnqw { width: 100% !important; max-width: 280px !important; margin: 20px auto !important; } /* Social Icons - Center horizontally */ #comp-kmm06lhc, #comp-kmm06lhp { width: 46px !important; height: 46px !important; margin: 10px 5px !important; display: inline-block !important; position: relative !important; left: 0 !important; } /* Footer */ #SITE_FOOTER { padding: 20px 15px !important; } /* Hide desktop-only elements */ [data-mesh-id$="-wedge-3"] { display: none !important; } /* Ensure images are responsive */ img { max-width: 100% !important; height: auto !important; } /* Text readability */ .font_0, .font_2, .font_3, .font_8 { word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Navigation spacing */ .JS76Uv { padding: 0 5px !important; } /* projects page */ .V5AUxf { flex-direction: column; } .md-prj-image { margin: 0px !important; left: 0px !important; } .wixui-rich-text { margin-left: 0px !important; width: 500px !important; } /* resume page */ .md-section { display: flex; flex-direction: column; } .md-section > div { position: static !important; } .wixui-vertical-line { display: none !important; } } /* Small Mobile Devices */ @media screen and (max-width: 480px) { #comp-klqs4iu4 h1 { font-size: 28px !important; } #comp-ldf03i1k h2 { font-size: 20px !important; } #comp-klqs5sbs p, #comp-ldf0chn9 p, #comp-ldf0chn01 p, #comp-ldf0chni p { font-size: 14px !important; line-height: 1.5em !important; } #comp-kmkurt7i { width: 200px !important; height: 200px !important; } #comp-ldf0chmi, #comp-ldf0chn4, #comp-ldf0chnc { width: 80px !important; height: 80px !important; } #c1dmp { padding: 0 10px !important; } /* projects page */ .V5AUxf { flex-direction: column; } .md-prj-image { margin: 0px !important; left: 0px !important; } .wixui-rich-text { margin-left: 0px !important; width: 300px !important; padding-left: 10px !important; } .md-button { margin-left: 100px !important; } #comp-ldj91ycx { margin-left: 30px !important; } /* resume page */ .md-section { display: flex; flex-direction: column; } .md-section > div { position: static !important; } .wixui-vertical-line { display: none !important; } } /* Tablet Portrait @media screen and (min-width: 769px) and (max-width: 1024px) { :root, :host { --site-width: 768px; } #comp-kmkurt7i { width: 300px !important; height: 300px !important; margin: 30px auto !important; } [data-mesh-id$="-gridContainer"] { padding: 0 30px !important; } } */