Skip to content

Skb/css testing banner #13889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 7 commits into
base: cc/banner-refactor
Choose a base branch
from
Draft

Skb/css testing banner #13889

wants to merge 7 commits into from

Conversation

sookburt
Copy link
Contributor

@sookburt sookburt commented May 1, 2025 •
edited
Loading

What does this change?

  • Tweaks to the CSS fix where the copy was sitting at the top of the headline and image instead of below
  • Tweaks to the CSS to stop the CTA from floating above the 3-tier choice cards between phablet and desktop
  • Add padding to ensure header image does not but against the choice cards
  • Fix ticker below CTA at mobile

Why?

Separating changes from the earlier branch so I don't break it.

Screenshots

Fix copy shifting to the top in Mobile

Before After
before after

CTA at Tablet no longer floating

Before After
before after

Fix header image butting against choice cards

Before After
before after

Fix ticker below CTA

Before After
before after

Fix headline and body copy below main image mobile

Before After
before after

@github-actions GitHub Actions
Copy link

github-actions bot commented May 1, 2025 •
edited
Loading

Size Change: +54 B (+0.01%)

Total Size: 981 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1032.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/117.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1234.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/1244.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/1656.client.web.********************.js 50.2 kB 0 B
dotcom-rendering/dist/2045.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/2161.client.web.********************.js 3.88 kB 0 B
dotcom-rendering/dist/223.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/2270.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/2309.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/2345.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/2360.client.web.********************.js 19.9 kB 0 B
dotcom-rendering/dist/2375.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/302.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/3226.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/3292.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/3384.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/3485.client.web.********************.js 4.67 kB 0 B
dotcom-rendering/dist/3598.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/3605.client.web.********************.js 15.1 kB 0 B
dotcom-rendering/dist/3619.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/4258.client.web.********************.js 4.08 kB 0 B
dotcom-rendering/dist/4306.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/4308.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/4324.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/4457.client.web.********************.js 6.25 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4577.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/4684.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/4685.client.web.********************.js 3.12 kB 0 B
dotcom-rendering/dist/4900.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/4958.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/5144.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/5448.client.web.********************.js 4.37 kB 0 B
dotcom-rendering/dist/545.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/547.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/5612.client.web.********************.js 7.98 kB 0 B
dotcom-rendering/dist/562.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/5734.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/6038.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/610.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/6217.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/6548.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/6555.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/6562.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/6722.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/6873.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/695.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/6966.client.web.********************.js 3.68 kB 0 B
dotcom-rendering/dist/7087.client.web.********************.js 7.72 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB 0 B
dotcom-rendering/dist/732.client.web.********************.js 3.07 kB 0 B
dotcom-rendering/dist/7398.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/7487.client.web.********************.js 5.24 kB +55 B (+1.06%)
dotcom-rendering/dist/7708.client.web.********************.js 5.05 kB 0 B
dotcom-rendering/dist/781.client.web.********************.js 156 B 0 B
dotcom-rendering/dist/7927.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/8050.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/8151.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/8212.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/8385.client.web.********************.js 3.88 kB 0 B
dotcom-rendering/dist/8436.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/8602.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/8619.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/864.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/8942.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/9135.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/9209.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/9376.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/967.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/9709.client.web.********************.js 2.73 kB 0 B
dotcom-rendering/dist/9822.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/9870.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.42 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 426 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.61 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.61 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.3 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.42 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.98 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.2 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.51 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.1 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.6 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB -1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 854 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.82 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.95 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.98 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.25 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.37 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 751 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.7 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.15 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.62 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.27 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.91 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 488 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.18 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 899 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 919 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.35 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.46 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.9 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.8 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.03 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.85 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.06 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B 0 B

compressed-size-action

@github-actions GitHub Actions
Copy link

github-actions bot commented May 1, 2025 •
edited
Loading

Deploy build 42553 of Mobile::mobile-apps-rendering to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented May 2, 2025 •
edited
Loading

Deploy build 18347 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
dotcom-rendering
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@sookburt