/* Anjanya / Anjaneya responsive hero-banner fix Add this CSS after the existing hero styles. It overrides the old object-fit: cover and fixed mobile heights. */ /* Desktop and tablet: let the hero row define the available height, while contain keeps the complete banner visible. */ #honey-app .hero { min-height: 0 !important; } #honey-app .hero-image { position: relative; min-height: 0 !important; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #d8c5a5; } #honey-app .hero-image img { position: static !important; inset: auto !important; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0 !important; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; background: #d8c5a5; } /* Mobile: use the banner's 21:9 ratio instead of a fixed 225px height. This prevents both vertical cropping and unnecessary forced stretching. */ @media (max-width: 850px) { #honey-app .hero-image { height: auto; min-height: 0 !important; aspect-ratio: 21 / 9; } #honey-app .hero-image img { width: 100%; height: 100%; object-fit: contain; } } @media (max-width: 580px) { #honey-app .hero-image { height: auto; min-height: 0 !important; aspect-ratio: 21 / 9; } } /* Safety rule for Elementor wrappers that may force clipping. */ #honey-app, #honey-app .hero, #honey-app .hero-image { max-height: none !important; } #honey-app .hero, #honey-app .hero-image { overflow: visible; } #honey-app .hero-image { overflow: hidden; }