/* ========================================================================== TABLET WHAT WAS MEASURED Every page at 768, 834 and 1024. Nothing overflows anywhere in that range — these are not overflow bugs. They are desktop three- and four-across rows that are still three and four across on a tablet, with each column down to a fraction of the width its content was written for. at 768 at 1024 Home Our Mission / Vision copy 119px 196px R&D capability card copy 111px 196px CSR the four society logos 80-95px 112px Localization the six pillar labels 139px 111px Strategic P. partnership photograph 343 x 498 (portrait) R&D overview photograph 281 x 498 (portrait) A 111px measure is roughly two words a line. Note the Localization labels are WORSE at 1024 than at 768 — above 860 the desktop arc layout was still in force, and it gives the labels less room than the stacked one does. THE BAND 768px to 1024px — the whole of Elementor's tablet range. Below 768 its own mobile rules take over and the mobile work already done applies; above 1024 the desktop composition works and is left completely alone. 1024 needed including: measured there, the CSR logo cells were 112px, the Localization labels 111px and the R&D copy 196px. A landscape iPad was no better served than a portrait one. The R&D card row is the exception and stops at 900 — see its own note. Each rule names the one section it is for. There is no shared width, no shared breakpoint behaviour and no attempt to make these sections resemble each other — a three-card row and a logo strip need different answers. Written at four classes because Elementor emits its own width and direction at three, from a stylesheet that loads after this one. ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* ---------------------------------------------------------------------- HOME — "Our Purpose" (section 0251cbb) A 40% intro column beside a 60% column that itself holds Our Mission and Our Vision side by side. Three columns out of 705px leaves the two paragraphs 119px each. The intro takes the full width and steps out of the way; Mission and Vision keep their pairing underneath it and go from 119px to about 300. -------------------------------------------------------------------- */ .elementor-86 .elementor-element.elementor-element-0251cbb.e-con { flex-wrap: wrap; } .elementor-86 .elementor-element.elementor-element-bc893b5.e-con, .elementor-86 .elementor-element.elementor-element-b7a4033.e-con { width: 100%; } /* ---------------------------------------------------------------------- CSR — "CSR Initiatives" (row b2a0b48) Two cards side by side, each ending in a strip of four society logos. Two 50% cards out of 705px gives each card ~350px, and each of its four logo cells ~80px — the logos shrink to thumbnails and their captions wrap to one word a line. One card per row. Each card then has the full measure and its four logos get ~175px each, which is what they were drawn for. -------------------------------------------------------------------- */ .elementor-121 .elementor-element.elementor-element-cb89fe4.e-con, .elementor-121 .elementor-element.elementor-element-187c974.e-con { width: 100%; } /* ---------------------------------------------------------------------- LOCALIZATION — the six pillars (.sud-loc) localization-map.css now switches out of the arc layout at 1024 rather than 860 (its own note explains why). This takes the next step: across the whole tablet range the pillars go into ONE column rather than two, so a label like "Strengthening National Drug Security" gets 170-280px instead of 111-139. Scoped to .sud-loc, which exists on one section of one page. -------------------------------------------------------------------- */ .sud-loc__col { grid-template-columns: minmax(0, 1fr); gap: 1rem; } /* ---------------------------------------------------------------------- TWO PHOTOGRAPHS STILL IN PORTRAIT Same cause as the mobile ratios: a min-height chosen for a wide desktop column, applied to a column that is no longer wide. 343x498 and 281x498 are portrait crops of landscape artwork. Both panels carry nothing but their decorative badge and are row-direction, so the height cap here cannot trigger the column-wrap described in mobile-image-ratios.css. -------------------------------------------------------------------- */ .elementor-120 .elementor-element.elementor-element-937f2c2.e-con, .elementor-124 .elementor-element.elementor-element-345e3f3.e-con { min-height: 0; aspect-ratio: 16 / 10; } } @media (min-width: 768px) and (max-width: 900px) { /* ---------------------------------------------------------------------- RESEARCH & DEVELOPMENT — "R&D Capabilities" (row dae8e28) Three 33.33% cards, each carrying a numbered heading and up to three icon-boxes. At 768 the icon-box copy came out at 111px. One card per row. Three full-width cards read better here than three columns of two-word lines, and the numbering already implies the order. This one stops at 900 rather than running to 1024: by 1024 the three cards are 292px each and hold together, and stacking them there would have given a 969px measure — the opposite problem. -------------------------------------------------------------------- */ .elementor-124 .elementor-element.elementor-element-dae8e28.e-con { flex-wrap: wrap; } .elementor-124 .elementor-element.elementor-element-cdbdec8.e-con, .elementor-124 .elementor-element.elementor-element-27cdd4f.e-con, .elementor-124 .elementor-element.elementor-element-ee8b7f3.e-con { width: 100%; } } /* ========================================================================== RESEARCH & DEVELOPMENT — "R&D Overview" bullets sitting on the copy Three containers in this section carry negative top margins: edcf21c the row -76px 1a17e1f the left column -78px 4cfbca5 the bullet list -65px ------ -219px On a desktop that is deliberate. The row is two columns, so pulling the bullets up 219px seats them alongside the heading and paragraph rather than below them — measured at 1440, the first bullet clears the paragraph by 73px. On a tablet the columns stack. The same -219px then pulls the bullets up over the copy they were meant to sit beside, and the first bullet lands 149px ON TOP of the paragraph. Measured: 1440 -73 clear 1024 +144 overlapping 834 +149 overlapping 768 +149 overlapping The icons were never the problem: at every one of those widths they already measure x=40 with their text at x=80 and an even 15px between items. What looked like staggered icons was the bullet rows crossing the paragraph's own lines behind them. So the offsets are dropped for the stacked range only, and the bullets fall into normal flow underneath the copy — 70px below it at 834. Desktop keeps its negative margins and its two-column composition untouched. ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-124 .elementor-element.elementor-element-edcf21c.e-con, .elementor-124 .elementor-element.elementor-element-1a17e1f.e-con, .elementor-124 .elementor-element.elementor-element-4cfbca5.e-con { margin-top: 0; } } /* ========================================================================== THERAPEUTIC AREAS — the page banners, cropped on tablet WHAT IS ACTUALLY WRONG Every banner on these nine pages is a container carrying a background image, and every one of those images is 1800 x 600 — a 3:1 letterbox. The container is given `--min-height: 503px` and `background-size: cover`, and Elementor emits that ONCE, with no tablet or mobile value. 503px is therefore the height at every width the site is ever seen at. `cover` scales the image until it fills BOTH axes. As soon as the box is narrower than 3 x 503, the binding axis becomes the HEIGHT: the image is scaled to 503px tall, which makes it 1509px wide, and everything either side of the box is thrown away. Measured, at the width the page actually gives it: box painted visible desktop 1440 1440 x 503 1509 wide 95% tablet 1024 1009 x 503 1509 wide 67% tablet 834 819 x 503 1509 wide 54% tablet 768 753 x 503 1509 wide 50% Half the artwork is discarded at 768 — 345px off each side at 834 — which is why the brain, the lungs and the molecule are sliced through. Desktop escapes for one reason only: its box is already nearly 3:1, so `cover` has almost nothing left to crop. THE FIX Give the box back the proportion its artwork was drawn at. At 3:1 the WIDTH becomes the binding axis instead of the height, and `cover` crops nothing. WHY min-height AND NOT aspect-ratio `aspect-ratio` would be exact, but it is a cap as well as a floor. These are column flex containers, and a column flex container whose content does not fit its fixed height does not overflow downwards — it wraps the content into a SECOND flex column, off to the right, outside the parent. That is the sideways-scroll fault documented at length in mobile-image-ratios.css. `min-height` is a floor only, so nothing can be clipped and nothing can wrap. WHY vw The height has to track the box's own WIDTH, and CSS has no width-relative length for an element's own height. These banners are full-bleed, so the viewport IS the width. 32.7vw is a third of it, less a hair, and erring a hair SHORT is deliberate: too tall crops the sides again, which is the bug; too short trims a pixel or two off the top and bottom of a letterbox, which is invisible. WHY SEVEN BANNERS AND NOT NINE Two of the nine are excluded, and neither is an oversight: Anti-Neoplastic (9ef7c20) its banner carries a visible child that is 587px tall at 768 — taller than the 503px floor ever was. The height is set by that content, not by min-height, so lowering the floor changes nothing at all. It measures 43% before and 43% after; the crop there is a content problem, not a min-height one. Rare Diseases (fe740c1) its banner shows an eyebrow and a text block on tablet whose natural bottom is 411px while the container's own natural height is 395px. The 503px floor is currently hiding a 16px overflow that is already in the layout. Lowering the floor exposes it — measured, the text spilled below the banner — so this one is left alone. Both keep exactly the behaviour they have today. Fixing them means changing what their banners contain, which is a content decision, not a CSS one. A NOTE ON THE OTHER TWO IDS Anesthesia and Miscellaneous each carry TWO banner containers: the one the generated CSS names first is marked hidden on desktop, tablet AND mobile — a dead duplicate — and the live one is a different element. The live ids are the ones listed below; targeting the dead pair would have changed nothing while appearing to work. Tablet only. Desktop keeps its 503px and its 95%; mobile is untouched. ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-126 .elementor-element.elementor-element-ac2a7d1.e-con, /* Therapeutic Areas */ .elementor-128 .elementor-element.elementor-element-4101e67.e-con, /* Respiratory */ .elementor-129 .elementor-element.elementor-element-1b0fda1.e-con, /* Neurology */ .elementor-130 .elementor-element.elementor-element-3f0267b.e-con, /* Cardio-Metabolic */ .elementor-132 .elementor-element.elementor-element-720308d.e-con, /* Autoimmune Diseases */ .elementor-133 .elementor-element.elementor-element-e3b14a7.e-con, /* Anesthesia */ .elementor-134 .elementor-element.elementor-element-0bda5ef.e-con { /* Miscellaneous */ min-height: 32.7vw; } }