/* mobile.css — mobile-optimized overrides for the portfolio. Loaded last in so these rules win over the inline desktop styles by source order. The desktop slider experience is untouched above 768px; on phones and small tablets the page becomes scroll-friendly, imagery scales to the viewport, and type sizes, spacing and tap targets are tuned for touch. Heavy background images are routed through the Netlify Image CDN at mobile-appropriate sizes so far less data is downloaded on small screens. */ @media (max-width: 768px) { /* Neutralise the 3D perspective transform inherited from the desktop layout so flow/fixed positioning behaves predictably, and let the document scroll vertically instead of being clipped. */ html, body { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; perspective: none; -webkit-perspective: none; transform: none; -webkit-transform: none; transform-style: flat; -webkit-transform-style: flat; font-size: 15px; } /* The empty desktop hero placeholder carries fixed px dimensions and no image, which can force horizontal scrolling — hide it. */ .gwd-img-1lh6 { display: none; } .contenedor { height: 100vh; } /* Each slide still fills the screen; its inner content scrolls when it is taller than the viewport (e.g. the About list and the form). Lighter background images are served via the Netlify Image CDN. */ .contenedor .slider .labels label { min-width: 100vw; min-height: 100vh; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/.netlify/images?url=/spacy-water_10_dark_3500p_1.jpg&w=900&q=70"); } .contenedor .slider .labels label:nth-child(2n+1) { background-image: url("/.netlify/images?url=/concrete_shelves_from_background_chiang_mai_3_apr_16-61.jpg&w=900&q=70"); } .content { width: 100%; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 78px 18px 36px; box-sizing: border-box; } /* Roomier, easier-to-tap navigation dots and labels. */ .contenedor .slider { padding: 14px 10px; } .contenedor .slider > input { margin: 12px 0; } .contenedor .slider > input::before { width: 14px; height: 14px; } /* Smaller logo so it clears the navigation on narrow screens. */ .gwd-img-33t5 { width: 56px; height: 56px; left: 14px; top: 12px; } /* Typography and spacing tuned for small screens. */ h1 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; } .content .block span, .content .block span i, ol { font-size: 16px; } ol { padding-left: 24px; } .content .block span { display: block; margin: 0 0 10px; } .content .block span i { margin: 0 0 12px; } /* Portfolio carousel fits the viewport width. */ .w3-content { width: 100% !important; } img.mySlides { width: 100%; height: auto; } /* Skill bars get a little breathing room. */ .bars li { margin-bottom: 28px; } /* The contact form already stacks via its own 600px query; let it use the full available width here. */ .contact-form { max-width: 100%; } /* Social icons sit closer together and shrink to fit. */ .social-links li { margin-left: 24px; } .social-links li:first-child { padding-top: 24px; margin-bottom: 24px; } .fa { padding: 14px; font-size: 22px; width: 22px; } }