/* * FreeLYFE Rx mobile fixes. * * Elementor element IDs are opaque hashes, so here is the map of what this file * touches. They are stable for the life of a template and only change if a * section is rebuilt from scratch. * * Header (sticky, present on every page) * b308e93 header container * 8df30f1 logo column eb723ae logo image widget * e22af46 nav + phone column a70c1df nav menu widget * 8d64e58 phone button widget * * Home page hero and "Why Us" mosaic * 100cae8 decorative cutout, positioned outside the phone viewport * 2c93596 the mosaic grid * 188e3f5 photo tile (lab glassware, spans two rows on desktop) * d94b177 photo tile (vials) * 551e697 photo tile (technician, spans two columns on desktop) * * Floating widgets * 7bccde8 rotated "Get Started" rail pinned to the right edge * e627882 sticky bottom bar, "GET STARTED / CALL" -- kept, it belongs on phones * * Footer * a537008 Quick Links menu a75f4e8 Follow Us menu * aff7382 legal links menu * * Two breakpoints, both Elementor's own. 1024px is where the header swaps the * desktop navigation for the hamburger, so everything to do with the menu, the * footer menus, forms and touch targets belongs there. 767px is where the * header itself and the mosaic need a different layout, not just bigger targets. */ /* ========================================================================== Tablet and below: wherever the hamburger is the navigation ========================================================================== */ @media (max-width: 1024px) { /* ---------------------------------------------------------------------- Floating widgets that landed on top of each other and on the content ---------------------------------------------------------------------- */ /* * A 39px-wide rail holding vertical text, pinned over the right edge of the * content. It sits on top of body copy at every scroll position and offers * the same call to action as the sticky bottom bar, which is only shown at * these widths. One of the two has to go, and the bottom bar is the one a * thumb can actually hit. */ .elementor-element-7bccde8 { display: none !important; } /* The scroll-to-top button sat on top of the sticky bar's right half. */ .eael-ext-scroll-to-top-button { right: 12px !important; bottom: 64px !important; } /* * UserWay pins its launcher to the vertical middle of the left edge, where it * covers body text and the first column of every card grid. Moved down beside * the scroll-to-top button, clear of the sticky bar but still one tap away. */ .uwy .userway_buttons_wrapper, .uwy.userway_p6 .userway_buttons_wrapper { top: auto !important; bottom: 64px !important; left: 12px !important; } /* ---------------------------------------------------------------------- Mobile menu: a 218px panel floating in the right half of the screen ---------------------------------------------------------------------- Elementor anchors the dropdown to the nav widget, which sits at the far right of the header, so the panel inherited the widget's narrow width and its offset -- 218px of menu starting 331px into an iPad screen. Taking the intermediate containers out of the positioning chain leaves the header as the dropdown's containing block, and left/right:0 then stretches the panel across it. Note the panel is the nav element. Elementor gives the submenu