/* ==========================================================================
MOBILE FIXES
Narrow, named corrections to specific sections on small screens.
Everything here is inside a max-width media query, so no desktop layout is
touched. Each block says which page and which section it reaches, and none
of them is a site-wide rule.
========================================================================== */
/* --------------------------------------------------------------------------
MANUFACTURE - "Manufacturing Excellence"
Page 549, eyebrow db156a5.
`.sud-eyebrow::before` draws a 28x2 green dash before every eyebrow label on
the site. It is a brand element and stays everywhere else; this hides it for
one label, where the eyebrow sits in a nowrap flex row and the dash plus its
gap pushed "Why Choose Sudair Pharma" onto a second line at 375px.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-549 .elementor-element.elementor-element-db156a5.sud-eyebrow::before {
content: none;
display: none;
}
}
/* --------------------------------------------------------------------------
MANUFACTURE - "Manufacturing Expansion"
Page 549, timeline container 63e9911.
The section's Elementor Custom CSS draws the timeline spine as
`#63e9911::before` — 2px x 850px of #78B89A pinned at `left: 91.5px`,
`top: 160px`. Both numbers are desktop measurements of a two-column timeline.
Stacked on a phone the container runs 1720px tall, so the 850px spine covers
only part of it, and the full-width photographs paint over the rest of it —
leaving the one line showing through the gaps between images as THREE
disconnected green segments, pinned 91.5px from the left of nothing.
The spine is hidden below the tablet breakpoint and untouched above it, where
the two-column timeline it belongs to still exists.
Four classes because the rule it overrides is written by Elementor into
post-549.css at three, and that file loads after the theme's.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-549 .elementor-element.elementor-element-63e9911.e-con::before {
content: none;
display: none;
}
}
/* --------------------------------------------------------------------------
RESEARCH & DEVELOPMENT - "R&D Overview" (section c441bad)
The page scrolled sideways by 1px at every mobile width. One pixel is enough:
the browser shows a horizontal scrollbar, the page drifts left and right, and
a sliver of white opens on the right.
Traced at 320px. The parent cf88510 is correct - x 24, width 272, ending at
296, inside the section's own gutter. Three of its children are not:
eyebrow 6a0d7b5 margin-left 34 width 263 -> ends at 321
divider 1ce2a11 margin-left 25 width 272 -> ends at 321
paragraph 0b719d7 margin-left 24 width 273 -> ends at 321
Each is close to the full width of its parent AND carries a left margin.
A margin sits outside the box, so a full-width element plus any left margin
overflows by that margin - all three hang 25px out of their own container,
and out of the viewport by one.
The paragraph is the clearest case: `--width: 100%` resolving to 273px inside
a 272px parent, then pushed a further 24px right.
On a phone these offsets have nothing to offset against - the column is the
full width of the screen - so they go, and the three elements line up on the
section's gutter like everything else on the page.
Selected by `data-id` because 0b719d7 is one of Elementor's atomic widgets:
its class is `e-0b719d7-d22d5a3`, not `elementor-element-0b719d7`, so the
usual class selector does not reach it.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-124 .elementor-element[data-id="6a0d7b5"],
.elementor-124 .elementor-element[data-id="1ce2a11"],
.elementor-124 [data-id="0b719d7"] {
margin-left: 0;
max-width: 100%;
}
}
/* --------------------------------------------------------------------------
MANUFACTURE - "Manufacturing Expansion" (section fb15026)
A different fault on a different page, and deliberately not shared with the
rule above: this one is four small nudges written as MOBILE values, on
elements that are already the full width of the screen.
Measured at 320px:
row 62d462e margin-left 10 width 320 -> ends at 330
image e7d0497 margin-left 9 width 320 -> ends at 339
image 18ef4ed margin-left 9 width 320 -> ends at 329
image 75d7c63 margin-left 13 width 320
19px of horizontal scroll. A 9px nudge is harmless on a desktop column with
room to spare; on a box that already fills the viewport it is 9px of overflow.
NOTE: this was fixed once in the page data and came back - the page was
re-saved in Elementor afterwards, which rewrote `_elementor_data` and undid
it. That is why it lives in CSS now: a stylesheet is not touched by an editor
save, so the fix cannot be lost the next time someone opens the page.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-549 .elementor-element[data-id="62d462e"],
.elementor-549 .elementor-element[data-id="e7d0497"],
.elementor-549 .elementor-element[data-id="75d7c63"],
.elementor-549 .elementor-element[data-id="18ef4ed"] {
margin-left: 0;
max-width: 100%;
}
}
/* --------------------------------------------------------------------------
ANTI-NEOPLASTIC - the intro stack (container d7a3d91)
Four stacked items in a 320px-wide column container, each sized to its own
min-content instead of the column: 95, 92, 82, 92px, and each offset to a
different x. The eyebrow "Therapeutic Areas" got 92px - the width of its
longest word - while its dash, gap and label need 220, so 128px of it was
painted outside its own box and the page scrolled 23px sideways at 320.
The children take the column's width, which is what a stacked column is for.
Nothing else about the section changes: the 24px gutter, the order and the
vertical rhythm are all as they were.
Mobile only - above 767px these items have room and are left alone.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-127 .elementor-element.elementor-element-d7a3d91.e-con > * {
width: 100%;
max-width: 100%;
align-self: stretch;
margin-inline: 0;
}
}
/* --------------------------------------------------------------------------
LOCALIZATION - "Localization Overview"
Page 125, section e5007eb.
The section carries 60px of its own inline padding, so on a 375px screen the
copy and the six pillars ran to 255px while every other section on the page
sat on 327px. The labels wrapped to two lines and the whole block read as
indented from its neighbours.
Only this section's outer padding changes; the pillars' own layout is fixed
in localization-map.css, where it belongs.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-125 .elementor-element.elementor-element-e5007eb {
padding-inline: 24px;
}
}
/* --------------------------------------------------------------------------
FOOTER (Elementor template 85)
Three containers each charged 24px of inline padding, so the link columns
started 72px in while the copyright line below them started at 48px - two
different left edges in the same footer. The grid also held a fixed 231px
column inside a 279px box, losing another 48px.
The row gap was built for a five-across desktop layout; stacked, it left
roughly 90px of empty space between each group and ran the footer to 1667px.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
/*
* One left edge for the whole footer: every nested container gives up its
* inline padding, and the outermost one puts a single 24px gutter back.
*/
.elementor-location-footer .e-con,
.elementor-location-footer .e-con > .e-con-inner {
padding-inline: 0;
}
.elementor-location-footer > .e-con.e-parent {
padding-inline: 24px;
}
/* The link groups stack; the fixed column width has nothing to hold. */
.elementor-location-footer .sud-footer__cols {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
/*
* Side by side, each group's 24px of block padding separated it from the
* footer's own edges. Stacked, that padding lands between the groups
* instead — 24 + 32 gap + 24 = 76px of empty green between one list and the
* next heading, which read as though the footer had lost a column.
*
* The gap above is now the only thing between them.
*/
.elementor-location-footer .sud-footer__cols > .e-con {
padding-block: 0;
}
/*
* The footer logo printed straight through the tagline beneath it.
*
* design-system.css sizes the mark with `max-height: 64px; width: auto` and
* leaves `height: auto`. A cap is not a size: the image PAINTED at 64px
* while its widget kept the 23.8px of a bare line box, so the tagline was
* laid out against 24px and rode up 20px into the logo. The widget's
* scrollHeight said 64 the whole time.
*
* Only this stacked column shows it — at tablet and desktop the same widget
* measures 64px, because there the column sits in a grid row whose height
* another cell has already established. So the height is stated here rather
* than in design-system.css, and desktop keeps the box it already had.
*/
.elementor-location-footer .sud-logo--footer img {
height: 64px;
max-height: none;
width: auto;
}
}
/* ==========================================================================
RESPONSIVE AUDIT — 2026-09-09
A sweep of all 31 live pages at 320, 360, 390, 412, 430, 600, 768 and 1024,
portrait and landscape: 203 page-by-viewport combinations, checking for
horizontal page scroll, content clipped inside its own box, and in-flow
elements overlapping.
Almost everything passed. Nothing overlapped that was not a deliberate
negative margin, and only three faults were real. They are fixed below; each
note says what was measured rather than what was assumed.
Two things that LOOK like faults and are not, recorded so they are not
"fixed" by someone later:
- the Home partners marquee reports an 8904px track. It is two identical
copies of the strip inside a clipped viewport; that is how the loop is
seamless.
- Strategic Partnerships and Localization report 600-2800px of clipped
content. Both are carousels: the parent measures `lost: 0` and the wide
child is a `swiper-initialized` / `sud-car__viewport` track.
========================================================================== */
/* --------------------------------------------------------------------------
CSR — the two initiative cards, clipped on every phone
Measured at 375, 390 and 600: the logo strip inside each card is 51px wider
than the card can show, and the right-hand logo is cut in half.
The cause is the pattern this project has hit repeatedly: an element at 100%
of its container PLUS a left margin. Elementor writes `margin-left: 51px` as
the MOBILE value on both strips, and a margin sits outside the box, so a
full-width box moved 51px right ends 51px past its parent:
e18c067 margin-left 51 width 293 in a 293 parent -> 51px clipped
f9d8aa5 margin-left 51 width 293 in a 293 parent -> 51px clipped
The offset exists to indent the strip from the card's icon on a wide layout.
Stacked on a phone there is nothing to indent from, so it goes, and the strip
lines up on the card's own gutter like everything else in it.
Tablet already sets this to 0 and is untouched. Desktop still carries the
51px and clips by 21px at 1200 and 1440 — the same fault, left alone here
because desktop was reported as correct and is out of this brief's scope.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-121 .elementor-element.elementor-element-e18c067,
.elementor-121 .elementor-element.elementor-element-f9d8aa5 {
margin-left: 0;
max-width: 100%;
}
}
/* --------------------------------------------------------------------------
ANTI-NEOPLASTIC — 55px of horizontal page scroll on a small phone
The only page on the site that scrolled sideways. Measured 55px at 320 and
17px at 390; clean by 430.
It took some finding because NO element was outside the viewport — the page
was being widened by a PSEUDO-element, which has no node to measure. Killing
every ::before and ::after took the page from 375 to exactly 320.
It is the decorative wash from visual.css:
.sud-field::before inline-size min(46vw, 620px) inset-inline-end -14%
.sud-field::after inline-size min(38vw, 500px) inset-inline-start -12%
Two blurred brand-coloured circles deliberately parked outside the section so
only an edge shows. `.sud-field` sets `overflow: hidden` to clip exactly this,
and here it does not: the section measures 320 wide with overflow hidden, yet
its pseudo still extends the page. Repositioning it made no difference and
neither did `overflow: clip` or removing the blur — only its SIZE moved the
number, which is what this rule uses.
Scoped to this page, and to 480px and below, because that is precisely where
the fault was measured. Every other .sud-field section on the site was clean
at every width tested, so the site-wide rule is left exactly as it is — this
page's section is the only one that runs full-bleed to the viewport edge.
The wash is kept rather than removed, just small enough to stay inside.
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.elementor-127 .sud-field::before,
.elementor-127 .sud-field::after {
inline-size: min(28vw, 220px);
}
}
/* --------------------------------------------------------------------------
MISSION & VISION (page 560) — 108px of horizontal page scroll
A paragraph with a hard `width: 380px` sitting in a 320px viewport. The rule
is `.elementor .e-1c32a03-62907e5 { width: 380px }` in that page's own
generated stylesheet, so it reaches nothing else.
Measured: 108px of page scroll at 320, 38px at 390, 44px at 768.
NOTE: this page is an orphan. It is published, but nothing links to it —
zero references in any other page's Elementor data and no menu item — and it
duplicates /about-sudair/mission-vision-values/, which is the one in the
navigation and which passes the audit clean. The right fix is to unpublish or
delete the duplicate; that is a content decision, so it is only flagged.
Meanwhile a width cap costs nothing and stops the page scrolling sideways for
anyone who reaches it by URL or search. `max-width` rather than `width`, so
the 380px still applies wherever there is room for it.
-------------------------------------------------------------------------- */
/*
* `.elementor` and `.elementor-560` sit on the SAME element, so a descendant
* selector between them matches nothing — the first attempt did exactly that
* and the page still scrolled 108px. Chained, and at three classes so it clears
* `.elementor .e-1c32a03-62907e5` at two.
*/
.elementor.elementor-560 [class*="e-1c32a03"],
.elementor.elementor-560 .e-con p {
max-inline-size: 100%;
width: auto;
}
/* --------------------------------------------------------------------------
MANUFACTURE (page 549) — "Production Capacity" stats, mobile
THE FOUR CARDS ARE NOT ONE GRID, THEY ARE TWO ROWS
Elementor builds this as a column container holding two row containers:
040a7cd mobile-only section --padding-top/bottom: 50px
└── .e-con-inner column, --row-gap: 30px
├── 95b232d row 1 padding 24px [ 300M Tablets | 150M Capsules ]
└── 310de87 row 2 padding 24px [ 9M Sterile | 6M Lyophilized ]
So the space between the two card rows is not one value, it is three stacked:
row 1 padding-bottom 24px
.e-con-inner row-gap 30px
row 2 padding-top 24px
----------------------------
78px
while the space BETWEEN the two cards in a row is the row container's own
`--row-gap: 20px`. Measured at 375px: 20px across, 78px down — the four cards
read as two separate pairs rather than one block, and the 58px of surplus
pushes everything below it down the page.
The 24px on the row containers is not authored per element; it is Elementor's
default container padding, which is why nothing in the page's own stylesheet
mentions it.
THE FIX
Take the vertical padding off both row containers and let the gap between
them be the only vertical space, set to the same 20px the cards already use
horizontally. 20px across, 20px down.
`padding-block` and not `padding` — the 24px INLINE padding is what insets
the cards from the section edge and therefore what sets their width. Touching
it would resize the cards, which is exactly what was asked not to happen.
`row-gap` on .e-con-inner and not `--row-gap` on the section: Elementor
composes `--gap: var(--row-gap) var(--column-gap)` and applies it as the
`gap` shorthand, so a longhand `row-gap` here is the single unambiguous
place to say it. Column-gap is untouched (the inner is a column, so it has
no effect either way).
Mobile only. The section itself is `elementor-hidden-desktop` and
`elementor-hidden-tablet`, so it does not exist above 767px; the media query
is belt-and-braces so the rule can never reach the desktop markup, which is a
different set of containers (9788e95 / 41ac90c).
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-549 .elementor-element.elementor-element-95b232d,
.elementor-549 .elementor-element.elementor-element-310de87 {
padding-block: 0;
}
.elementor-549 .elementor-element.elementor-element-040a7cd > .e-con-inner {
row-gap: 20px;
}
}
/* --------------------------------------------------------------------------
THERAPEUTIC AREAS — "Our Portfolio" intro paragraph, mobile
A DESKTOP WIDTH THAT WAS NEVER GIVEN A MOBILE VALUE
The paragraph under "Products in this therapeutic area" carries Elementor's
per-widget Custom Width. It was set once, for desktop, and no tablet or mobile
value was ever entered — so the desktop percentage is the value at EVERY
breakpoint. Elementor writes it into the page's own stylesheet as
.elementor-128 .elementor-element.elementor-element-3a0644a {
width: var( --container-widget-width, 62% );
max-width: 62%;
--container-widget-width: 62%;
}
with no media query around it.
On a 1440px screen 62% of a wide column is a sensible reading measure. On a
375px phone the same 62% is taken of a column that is already only 231px, so
the paragraph renders 143px wide — 38% of the screen — and wraps three words
to a line while the headings above it run the full width. That is the empty
band down the right of the section.
Measured at 375px, per page:
page custom width paragraph
128 Respiratory 62% 143.2px
133 Anesthesia 63% 145.5px
131 Rare Diseases 64% 147.8px
134 Miscellaneous 64% 147.8px
132 Autoimmune Diseases 65% 150.1px
130 Cardio-Metabolic 56% 156.2px
129 Neurology - 231px (no custom width)
127 Anti-Neoplastic - full (already resolves 100%)
THE FIX
Give the widget the mobile value it never had: 100% of the column it sits in.
Nothing else changes — the font, size, line-height, colour, the container, its
padding and the cards below are all untouched, and the paragraph simply stops
being narrower than its own column.
SCOPED TO THESE EIGHT PAGES ON PURPOSE
`.sud-lead.sud-measure` is a site-wide pair used on Careers, Contact Us,
Company Overview, Mission Vision & Values, Leadership, Strategic Partnerships
and CSR as well, most of them also carrying a desktop custom width. Those are
different sections with their own layouts and were not reported, so the rule
names the therapeutic-area pages rather than the class alone.
`max-width` is deliberately NOT touched: it already resolves to 100% here, and
overriding it would lift the 68ch reading measure that `.sud-measure` sets in
the design system.
Mobile only. Above 767px the page's own rule stands and desktop and tablet
keep the percentage they were designed with.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-127 .sud-lead.sud-measure,
.elementor-128 .sud-lead.sud-measure,
.elementor-129 .sud-lead.sud-measure,
.elementor-130 .sud-lead.sud-measure,
.elementor-131 .sud-lead.sud-measure,
.elementor-132 .sud-lead.sud-measure,
.elementor-133 .sud-lead.sud-measure,
.elementor-134 .sud-lead.sud-measure {
--container-widget-width: 100%;
width: 100%;
}
}
/* --------------------------------------------------------------------------
THERAPEUTIC AREAS — "Our Portfolio" text column, mobile
THE SECOND HALF OF THE SAME NARROW COLUMN
Widening the paragraph above gets it to the full width of the box it sits in.
That box is still not the width of the section: the block holding the
breadcrumb, "Our Portfolio", the heading and the paragraph carries Elementor's
default 24px container padding, on top of the 24px the section already has and
the 24px on the boxed container inside it. Three paddings stack, so at 375px
the text runs in 231px while the product cards immediately below it run in 279
and start 24px further left.
Measured at 375px — text box vs the cards under it:
page text content product cards
127 Anti-Neoplastic x 72 w 231 x 48 w 279
128 Respiratory x 72 w 231 x 48 w 279
129 Neurology x 72 w 231 x 48 w 279
131 Rare Diseases x 72 w 231 x 48 w 279
132 Autoimmune Diseases x 72 w 231 x 48 w 279
133 Anesthesia x 72 w 231 x 48 w 279
134 Miscellaneous x 72 w 231 x 48 w 279
Dropping the INLINE padding puts the text on the same left edge and the same
width as the cards, which is the page's own gutter — 48px at 375px, section
24px plus container 24px. The block padding is left at 24px, so the vertical
rhythm above and below the text is exactly as it was.
These containers have no background, border or radius (checked on all six), so
the padding is doing nothing but insetting the text.
ONE PAGE IS DELIBERATELY NOT IN THIS LIST
130 Cardio-Metabolic text x 48 w 279, cards x 72 w 231 — one less level
of nesting on the text and one more on the cards,
so the text is already the WIDER of the two.
Removing its padding would push the text out past
the cards rather than align it, so the width fix
above is all that page gets.
Mobile only; above 767px these containers keep their padding.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-127 .elementor-element.elementor-element-8634fce,
.elementor-128 .elementor-element.elementor-element-4e7a81c,
.elementor-129 .elementor-element.elementor-element-035ed5f,
.elementor-131 .elementor-element.elementor-element-c655705,
.elementor-132 .elementor-element.elementor-element-3b9d6d1,
.elementor-133 .elementor-element.elementor-element-8b27714,
.elementor-134 .elementor-element.elementor-element-7e6423a {
padding-inline: 0;
}
}
/* ==========================================================================
THERAPEUTIC AREAS — "Our Portfolio" intro, mobile composition
Pages 127 Anti-Neoplastic, 128 Respiratory, 129 Neurology,
130 Cardio-Metabolic, 131 Rare Diseases, 132 Autoimmune Diseases,
133 Anesthesia, 134 Miscellaneous
Everything below is scoped to ONE container per page — the block holding the
breadcrumb, "Our Portfolio", "Products in this therapeutic area" and the
paragraph:
127 8634fce 130 a8cb3e0 133 8b27714
128 4e7a81c 131 c655705 134 7e6423a
129 035ed5f 132 3b9d6d1
Scoping this tightly matters: .sud-eyebrow, .sud-breadcrumb, .sud-lead and
.sud-measure are all site-wide classes, and each of these pages uses
.sud-eyebrow and .sud-breadcrumb AGAIN in its own hero banner. Naming the
intro container is what keeps the hero, the product cards and every other
page out of it.
========================================================================== */
@media (max-width: 767px) {
/* --------------------------------------------------------------------------
BREADCRUMB — one line where the width allows
"Home / Therapeutic Areas / " at a fixed 14px needs more room than a
phone has, so it wrapped to two lines on every page. Measured in the real
font at 14px: 255px (Neurology) up to 333px (Autoimmune Diseases), against
294px of content width at 390px.
A fluid size fixes it with no fixed width and no `nowrap` — nowrap would have
traded a wrapped line for a horizontal scrollbar.
The scale is measured, not estimated. Each page's breadcrumb was cloned with
`white-space: nowrap` and its natural width read back, giving the width it
needs per 1px of font-size:
Neurology 22.7 Miscellaneous 24.9
Anesthesia 23.0 Anti-Neoplastic 26.7
Respiratory 23.3 Cardio-Metabolic 27.7
Rare Diseases 24.7 Autoimmune Diseases 29.6
Against a content width of viewport-96 that gives, measured:
320px 6 of 8 on one line
360px 6 of 8
375px 7 of 8
390px 7 of 8
412px 8 of 8
430px 8 of 8
The hold-out is Autoimmune Diseases, the longest name on the site, which
needs roughly 400px of screen before it fits at a size worth reading. Below
its threshold it wraps to two lines exactly as it does today — never
overflows. The 9px floor is the line: chasing one line on every page at 320px
would need a 7px breadcrumb, which is not a trade worth making.
Size only. Family, weight, colour and the "/" separators are untouched.
-------------------------------------------------------------------------- */
.elementor-127 .elementor-element-8634fce .sud-breadcrumb,
.elementor-128 .elementor-element-4e7a81c .sud-breadcrumb,
.elementor-129 .elementor-element-035ed5f .sud-breadcrumb,
.elementor-130 .elementor-element-a8cb3e0 .sud-breadcrumb,
.elementor-131 .elementor-element-c655705 .sud-breadcrumb,
.elementor-132 .elementor-element-3b9d6d1 .sud-breadcrumb,
.elementor-133 .elementor-element-8b27714 .sud-breadcrumb,
.elementor-134 .elementor-element-7e6423a .sud-breadcrumb {
font-size: clamp(9px, 2.4vw, 13px);
}
/* --------------------------------------------------------------------------
"OUR PORTFOLIO" — 32px is a desktop size on a phone
32px across a 294px column is most of the screen width for two words. 22px
keeps it clearly the largest thing in the block without dominating the
section. Family, weight, colour and the green treatment are untouched.
-------------------------------------------------------------------------- */
.elementor-127 .elementor-element-8634fce .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-128 .elementor-element-4e7a81c .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-129 .elementor-element-035ed5f .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-130 .elementor-element-a8cb3e0 .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-131 .elementor-element-c655705 .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-132 .elementor-element-3b9d6d1 .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-133 .elementor-element-8b27714 .elementor-widget-heading.sud-eyebrow .elementor-heading-title,
.elementor-134 .elementor-element-7e6423a .elementor-widget-heading.sud-eyebrow .elementor-heading-title {
font-size: 22px;
}
/* --------------------------------------------------------------------------
"PRODUCTS IN THIS THERAPEUTIC AREA" — 23.5px over two lines
At 16px it sits on one line from 375px up, stays plainly subordinate to "Our
Portfolio" above and plainly senior to the paragraph below.
`.elementor-widget-heading.sud-measure` is what separates this from the
paragraph, which carries `.sud-lead.sud-measure` on a text-editor widget.
-------------------------------------------------------------------------- */
.elementor-127 .elementor-element-8634fce .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-128 .elementor-element-4e7a81c .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-129 .elementor-element-035ed5f .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-130 .elementor-element-a8cb3e0 .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-131 .elementor-element-c655705 .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-132 .elementor-element-3b9d6d1 .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-133 .elementor-element-8b27714 .elementor-widget-heading.sud-measure .elementor-heading-title,
.elementor-134 .elementor-element-7e6423a .elementor-widget-heading.sud-measure .elementor-heading-title {
font-size: 16px;
}
/* --------------------------------------------------------------------------
PARAGRAPH — the width fix stands, the size comes down one step
The full-column width applied in the previous deployment is untouched; this
is size only. 17px ran to six lines. 14px is the size already chosen for this
same paragraph on Neurology in the Elementor editor, so this brings the other
seven pages onto a value picked for this page type rather than invented here.
Targeted at the `p`, not the widget: `.sud-lead p` in the design system sets
the size on the paragraph element itself, so a size on the widget is simply
inherited past and has no effect. Measured: widget 14px, paragraph still 17px.
-------------------------------------------------------------------------- */
.elementor-127 .elementor-element-8634fce .sud-lead.sud-measure p,
.elementor-128 .elementor-element-4e7a81c .sud-lead.sud-measure p,
.elementor-129 .elementor-element-035ed5f .sud-lead.sud-measure p,
.elementor-130 .elementor-element-a8cb3e0 .sud-lead.sud-measure p,
.elementor-131 .elementor-element-c655705 .sud-lead.sud-measure p,
.elementor-132 .elementor-element-3b9d6d1 .sud-lead.sud-measure p,
.elementor-133 .elementor-element-8b27714 .sud-lead.sud-measure p,
.elementor-134 .elementor-element-7e6423a .sud-lead.sud-measure p {
font-size: 14px;
}
/* --------------------------------------------------------------------------
THE EMPTY SPACE BELOW THE PARAGRAPH
Two different causes, because the pages are not built the same way.
SIX PAGES — an empty spacer widget.
Between the intro block and the product cards sits an Elementor SPACER: a
widget whose entire content is , 40px
tall, with a desktop-only value. With the 8px the intro block already ends
with, that is the whole 48px gap. Reduced to 16px on mobile, so the gap
becomes 24px. The widget is not removed: it is page content and it has a job
on desktop.
ONE PAGE — 130 Cardio-Metabolic, five stacked paddings.
Its cards live in a SEPARATE top-level section rather than the same one, and
five containers each add padding across the seam:
a8cb3e0 intro block padding-bottom 24px (8px of it below the text)
735ed33 intro section padding-bottom 24px
b72d16d > .e-con-inner padding-top 24px
b0ee561 padding-top 24px
6e18a2f padding-top 24px
---------------------------------------------------
104px between the paragraph and "Cardiovascular"
Clearing the intro section's bottom and two of the three tops leaves one
24px, so the gap becomes 32px — the same range as the other seven, and still
a deliberate break before the product list.
127 Anti-Neoplastic has the same separate-section shape; it is handled below.
-------------------------------------------------------------------------- */
.elementor-128 .elementor-element.elementor-element-e347472,
.elementor-129 .elementor-element.elementor-element-e30fdf8,
.elementor-131 .elementor-element.elementor-element-dd3a9be,
.elementor-132 .elementor-element.elementor-element-56bcf4e,
.elementor-133 .elementor-element.elementor-element-6b1b983,
.elementor-134 .elementor-element.elementor-element-28115f9 {
--spacer-size: 16px;
}
.elementor-130 .elementor-element.elementor-element-735ed33 {
padding-bottom: 0;
}
.elementor-130 .elementor-element.elementor-element-b0ee561,
.elementor-130 .elementor-element.elementor-element-6e18a2f {
padding-top: 0;
}
/* 127 Anti-Neoplastic — the same separate-section shape as 130, but with a
64px section padding rather than 24px, which is why its gap measured 142px:
8634fce intro block padding-bottom 24px (8px below the text)
8608364 > .e-con-inner padding-bottom 24px
01d9423 intro section padding-bottom 64px
aba0592 > .e-con-inner padding-top 24px
a7f851a padding-top 24px
----------------------------------------------------------
142px between the paragraph and the first product group
Same treatment: clear all but one 24px, leaving a 32px gap. */
.elementor-127 .elementor-element.elementor-element-8608364 > .e-con-inner,
.elementor-127 .elementor-element.elementor-element-01d9423 {
padding-bottom: 0;
}
.elementor-127 .elementor-element.elementor-element-a7f851a {
padding-top: 0;
}
}
/* --------------------------------------------------------------------------
LEADERSHIP & GOVERNANCE - "The people behind Sudair Pharma"
Page 119, containers e0a4d45 + 852946e, paragraph 1f9f932.
The page's reading edge on a phone is 48px. The breadcrumb, the H1, "Board
of Directors" and "Executive Leadership" all start there, because each is a
direct child of 3542d7a and picks up exactly two 24px container gutters:
CON 6f4df3a x0 padding-inline 24 -> 24
CON 3542d7a x24 padding-inline 24 -> 48 <- the reading edge
W 31b78c5 x48 "Board of Directors"
The intro is not a direct child. It sits two containers deeper, and the kit
default (--container-default-padding-left/right: 24px, post-5.css) applies
to every container, so each nesting level adds another 24px:
CON e0a4d45 x48 padding-inline 24 -> 72
CON 852946e x72 padding-inline 24 -> 96
W 3fe4cbc x96 the heading
W 1f9f932 x97 margin-left 25px the paragraph
That is the whole bug. The nesting is a desktop composition - at 1440 it
steps the intro in from the page edge deliberately - but on a phone there is
no room for it, so the heading lands 48px inside the reading edge and the
paragraph 49px, and the section reads as if it belongs to a different grid.
The paragraph is worse than the heading by 1px on the left and is the only
one of the two that is ASYMMETRIC (97 left / 72 right), because its 25px is
a physical margin-left written in the editor. In Arabic that margin stays on
the left, which is the trailing side, so the Arabic reading edge sat at 72
while English sat at 97 - wrong by a different amount in each language.
Measured at 390px, before -> after, both languages:
English Arabic
heading 3fe4cbc 96/96 -> 48/48 96/96 -> 48/48
paragraph 1f9f932 97/72 -> 48/48 97/72 -> 48/48
"Board of Directors" 48/48 48/48 (reference, untouched)
Only the two inner containers' side gutters and that one physical margin are
removed, so the heading and the paragraph fall back onto the section's own
48px edge. padding-block is left alone, so the vertical rhythm does not move.
text-align stays `start` throughout - left in English, right in Arabic - and
the margin is zeroed for both languages, so neither needs an RTL variant.
Phones only. The leadership cards live inside 31b78c5 and faf3609 and are
not reached by any of this.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* The two extra nesting gutters, 24px each. */
.elementor-119 .elementor-element.elementor-element-e0a4d45,
.elementor-119 .elementor-element.elementor-element-852946e {
padding-inline: 0;
}
/*
* The paragraph's own indent. Longhand, because the editor writes it as a
* `margin` shorthand that also carries a -12px top margin pulling the
* paragraph up under the heading - that has to survive.
*/
.elementor-119 .elementor-element.elementor-element-1f9f932.elementor-widget-text-editor {
margin-left: 0;
}
}
/* --------------------------------------------------------------------------
COMPANY OVERVIEW (page 117) — 56px of horizontal page scroll, ARABIC ONLY
The page slid sideways on a phone. Measured scrollWidth against a 390
viewport: Arabic 446, English 390.
Nothing was outside the viewport, because the page was being widened by a
PSEUDO-element — the same decorative wash from visual.css that did it on
Anti-Neoplastic above, but for a different reason and needing a different
answer.
.sud-field::before inline-size min(46vw, 620px) inset-inline-end: -14%
The overflow is exactly 14% of the viewport at every width, which is that
inset: 56px at 390, 53px at 375, 105 at 768, 199 at 1440.
WHY IT IS ARABIC ONLY. `inset-inline-end` is the LOGICAL end edge, so it
resolves to the physical right in English and the physical LEFT in Arabic.
In English the wash sits inside the section (used left 0, width 180) and
nothing overflows. In Arabic it resolves to left -54.65px and hangs off the
left — which in RTL is the scrollable end of the document, so the page gains
56px of travel.
WHY IT IS NOT CLIPPED. `.sud-field` sets `overflow: hidden` precisely to clip
this wash. On this one section that clip has been deliberately REMOVED:
journey-timeline.js walks up from the timeline and puts `.sud-tj-unclip`
(`overflow: visible !important`) on every clipping ancestor, because an
ancestor with a clip confines `position: sticky` and the year strip is
sticky at every width, phones included. So the clip cannot come back — it
was measured: restoring `overflow: hidden` here does fix the 56px, and it
also stops the year strip sticking.
WHAT WAS TRIED. `clip-path: inset(0)` on the section looked ideal, since it
clips without creating a scrollport and so leaves sticky alone. It does not
work: measured, the page stayed at 446. clip-path clips PAINTING, but the
element still contributes to scrollable overflow.
THE FIX. The wash stops crossing the end edge: `inset-inline-end: 0` parks
it flush inside instead of 14% outside. Nothing is hidden, nothing is
clipped, and the element that actually caused the overflow is the element
that changed. The wash keeps its size, blur, colour and z-index; it is a
transparent radial gradient behind the content (z-index: -1), so what moves
is 55px of its soft edge.
Behind [dir="rtl"], so English — which has no fault — cannot match it, and
behind max-width 767 so tablet and desktop are untouched. `.sud-tj-unclip`
scopes it to a section that has actually lost its clip, and `.sud-tj` exists
on page 117 alone, so nothing else on the site can match either.
DESKTOP IS NOW FIXED TOO, not here but in company-overview-rtl.css, which is
the page's own sheet — the identical `inset-inline-end: 0` behind
`min-width: 1024px`. That write-up also pins down something this one only
guessed at: English escapes because Elementor's `.e-con::before` sets a
physical `left: 0` on the same pseudo, which over-constrains the box in LTR
and makes the browser discard the -14% outright.
The tablet band, 768 to 1023, still carries the fault (105px at 768). Both
briefs were explicit about not touching tablet, so it is still open.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
[dir="rtl"] .sud-field.sud-tj-unclip::before {
inset-inline-end: 0;
}
}
/* --------------------------------------------------------------------------
MANUFACTURE — the "Manufacturing Expansion" eyebrow drifts off centre
Page 549, eyebrow cd2717a.
The eyebrow is meant to be centred on phones — post-549.css says so:
@media (max-width: 767px)
.elementor-element-cd2717a { margin: -107px 0 … 71px; text-align: center }
but `text-align` cannot centre it. The widget carries `.sud-eyebrow`, whose
heading title is `display: flex` so it can sit the green dash beside the
label, and text-align does nothing to flex items. The label therefore stayed
where it started, and the 71px left margin was tuned by hand until it LOOKED
centred — which it only does at one width.
Both numbers are fixed: the 71px margin, and the 260px the eyebrow shrinks
to. So its optical centre is pinned at x=201 no matter how wide the screen
is, while the page centre moves with the viewport:
width page centre eyebrow centre drift
375 188 201 +14px right of centre
390 195 201 +6px
393 197 201 +5px
412 206 201 -5px
430 215 201 -14px left of centre
It is square at about 402px and leans ±14px at the ends of the mobile range —
the "correct on a Pro Max, misaligned on a smaller Android" in the brief.
THE FIX
The eyebrow is a flex item of the section's column, so `margin-inline: auto`
centres it in the container — the browser does the arithmetic at every width
instead of a number standing in for it. The hand-tuned 71px goes with it.
Measured after: drift 0 at 375, 390, 393, 412 and 430, with matching insets
either side (57/57, 65/65, 66/66, 76/76, 85/85).
Only the inline axis is set, so the -107px top margin that pulls the eyebrow
up over the band above it is untouched, as are its size, weight and colour.
`body:not(.rtl)` because Arabic already positions this eyebrow deliberately —
manufacture-rtl.css puts it on the reading edge with the paragraph beneath it
— and that is not this bug. Phones only; desktop and tablet keep their own
`margin: -90px 0 … 0` from the page.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
body:not(.rtl) .elementor-549 .elementor-element.elementor-element-cd2717a {
margin-inline: auto;
}
}
/* --------------------------------------------------------------------------
HOME — the phone hero video did not reach the edges
Page 86, section 2adc7de.
The phone has its own hero section, separate from the desktop banner:
ccf0431 .sud-banner.sud-vbanner hide_mobile -> desktop + tablet
2adc7de holds video widget f2c86b9 hide_desktop + hide_tablet -> phones
2adc7de is an ordinary Elementor container, so it picks up the kit's default
container padding — 24px on each side (--container-default-padding-left /
-right, post-5.css). Nothing else insets it:
CON 2adc7de x0 w390 padding 0 24px 0 24px
W f2c86b9 x24 w342 <- the video
So the film sat 24px in from each edge with white either side, where a hero
should run edge to edge.
Only the inline padding goes. The block padding is already 0, so the rule
cannot change the section's vertical rhythm, and the video keeps its own
16:9 — measured 1.778 before and after at every width. It is not stretched
and not cropped; at full width that ratio simply makes it taller, which is
what going edge to edge means:
width video before video after
375 327 x 184.1 375 x 211.1
390 342 x 192.6 390 x 219.6
393 345 x 194.4 394 x 221.4
412 364 x 205.1 412 x 231.8
430 382 x 214.9 430 x 242.1
DESKTOP AND TABLET CANNOT BE REACHED. 2adc7de carries hide_desktop and
hide_tablet, so it does not render above the phone breakpoint at all, and the
rule is inside max-width 767 as well. The desktop banner ccf0431 is a
different section and is not named here.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-86 .elementor-element.elementor-element-2adc7de {
padding-inline: 0;
}
}