/* ========================================================================== APP PAGES ON PHONES AND TABLETS (ccx-mobapps) Five pages, one file, nothing above 1024px. Every rule below answers a measurement taken on the rendered page at 360, 375, 390, 414, 768, 834 and 1024 pixels; the number that was read is written next to the rule. Scope classes come from inc/ccx-mobapps.php: .ccmb-on all five pages .ccmb-apps /cartcraft-overview-apps/ .ccmb-prod /price-app/, /nutrition-app/, /smilescore-app/ .ccmb-what /what-are-shopify-apps/ ========================================================================== */ /* -------------------------------------------------------------------------- 1 THE GHOST NUMERALS OF THE APP BLOCKS BELONG ON THE RIGHT assets/ccx-apps26.css puts the numeral of a block on the right hand side of its text column from 1025px up and leaves it on the left below that: up to 767px left: -6px, top: -6px, font-size: 140px 768 to 1024 left: -8px, top: -14px, font-size: 220px On the left it sits behind the first words of the headline and behind the badge row, which is the one place a numeral this size cannot be read as a watermark. The house rule says the opposite, and the reference blocks of the home page have been doing the opposite for a while. Their numerals, measured on the home page: 375px right: 0, top: 20px, font-size: 150px 768px right: 0, top: 24px, font-size: 240px 1024px right: 0, top: 24px, font-size: 240px Those three numbers are taken over here unchanged, so the app blocks and the reference blocks carry the same mark at the same size in the same corner. The rule above 1025px in ccx-apps26.css already agrees with this and is not touched. Weight: the rules being overruled are (0,1,1) and sit inside a media query. The selector below repeats the class of the host and adds the card and the body, which lands at (0,5,1), so the outcome does not depend on which stylesheet the browser reads last. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccmb-apps .ccapp-card .ccapp-content.ccapp-content::after { top: 24px; bottom: auto; left: auto; right: 0; font-size: 240px; } } @media (max-width: 767px) { body.ccmb-apps .ccapp-card .ccapp-content.ccapp-content::after { top: 20px; font-size: 150px; } } /* -------------------------------------------------------------------------- 2 ONE READING EDGE PER APP BLOCK ON PHONES Measured inside .ccapp-content at 375px, from top to bottom: badge row text-align start (name pill, state pill) headline text-align center sub line text-align center bullet list text-align start button row justify-content center Four elements of one block, three different edges. The block reads as if it had been assembled twice. From 768px up the same block is left aligned throughout, which is also what the reference blocks of the home page do on every width, so the phone view is the odd one out and gets the left edge. The button row is included on purpose. Leaving a centred pill under left aligned copy would only move the break rather than close it. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.ccmb-apps .ccapp-card .ccapp-content .elementor-widget-heading, body.ccmb-apps .ccapp-card .ccapp-content .elementor-widget-text-editor, body.ccmb-apps .ccapp-card .ccapp-content .elementor-widget-heading .elementor-heading-title, body.ccmb-apps .ccapp-card .ccapp-content .elementor-widget-text-editor p { text-align: left; } body.ccmb-apps .ccapp-card .ccapp-content > .e-con, body.ccmb-apps .ccapp-card .ccapp-content > .e-con > .e-con-inner { justify-content: flex-start; align-items: flex-start; } } /* -------------------------------------------------------------------------- 3 WHAT A FINGER CAN HIT Measured heights of the interactive elements inside the page content at 375px, all of them well under the 44px a finger needs: "Documentation" 121 x 15 all three app pages "View the app in the Shopify App..." 271 x 15 price app "Learn more" 91 x 17 app service page "Install the App" 123 x 21 price app, card title "Add the Theme App Block" 223 x 21 "Translation Options" 225 x 28 "Global Settings" 176 x 28 "Custom Fonts" 161 x 28 "Manual Sync" 147 x 28 "Load the guide" 156 x 42 two pixels short None of them is a filled button, so the fix is not a background but a taller box around the same words: inline-flex with a minimum height keeps the text where it is and grows the hit area above and below it. Where such a link sits in a row next to a pill the row is already 44px or taller and nothing moves; where it stands alone the block below it moves down by the difference, which is the price of a target that can be hit. The links stay bare. This rule touches the box, never the paint, so the text links that ccx-papp-hero and ccx-apps26 deliberately strip of every button effect keep looking like text. Two guards on the selectors. Only .elementor-size-sm buttons are named: the filled calls to action of these pages are size-md or containers with a painted pill, and both are 44px or taller already. And only h3 titles are named: the name pill of an app block is a heading as well, and a pill is a painted shape that a minimum height would stretch. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccmb-on .elementor-button-wrapper > a.elementor-button-link.elementor-size-sm, body.ccmb-on h3.elementor-heading-title > a, body.ccmb-on a.ccx-scribe-load { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; } } /* -------------------------------------------------------------------------- 4 THE PICTURE OF THE THIRD APP BLOCK ON PHONES Group-1216259448.png is 319 x 268 pixels and the page gives it a height of 190px with object-fit: contain below 768px. Contain keeps the picture whole and pads the rest, so the widget shows a 319 x 190 box with the picture at 319 x 268 scaled down to 226 x 190 and 93 pixels of empty band around it: measured aspect deviation 41 percent against the file. The other two pictures of the page carry a height as well, but one that matches their file (deviation 0 and 1 percent). Letting all three find their own height therefore changes one picture and leaves two alone. Weight: the height comes from the page as .elementor-1977 .elementor-element.elementor-element-8c57c43 img, which is (0,3,0). The declaration below carries !important rather than a longer selector, because the id in that selector is the one thing that changes when the block is rebuilt. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.ccmb-apps .ccapp-mockcol .elementor-widget-image img { height: auto !important; object-fit: contain; } } /* -------------------------------------------------------------------------- 5 THE PILL AND THE LINK IN THE RESOURCE CARDS Shortcode template 2932 "Access Key Resources" is embedded on all three product pages. Its left card holds a painted pill and a text link in one row that does not wrap: row width 291px at 768, 414px at 1024 pill 153px at 768, 214px at 1024 and above text link 154px The pill is a background picture, 449 x 105, drawn with background-size: contain, and the arrow circle is the right quarter of that picture. At 214px the circle sits clear of the label. At 768px the row is too narrow for pill plus link, the pill is the flexible one, and it is squeezed to 153px: the picture shrinks with it, the circle lands at x 117 to 153 of the pill while the label runs to 122, and the arrow is drawn across the last letters of "Visit Support". The cause is the squeeze, so the squeeze is what goes: the pill keeps its width and the row is allowed to break. The link then sits on a second line, which is what it already does below 768px. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.ccmb-prod .elementor-2932 a.ccps-pill-art { flex: 0 0 auto; } body.ccmb-prod .elementor-2932 .elementor-element-b7a2d03 { flex-wrap: wrap; } } /* -------------------------------------------------------------------------- 6 THE OPENING PARAGRAPH OF THE PRICE APP In the opening block the headline is centred on every width. The paragraph under it is centred up to 767px and left aligned from 768px up, so the tablet view shows a centred headline over a paragraph with a ragged right edge inside a box that is centred itself. The paragraph follows the headline instead. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { body.ccmb-prod .elementor-2278 .elementor-element-8f4a2f0, body.ccmb-prod .elementor-2278 .elementor-element-8f4a2f0 p { text-align: center; } } /* -------------------------------------------------------------------------- 7 THE GAP BEFORE "WHY USE SHOPIFY APPS" Section 6f6b1519 of the explainer carries padding-top: 228px between 768 and 1024 pixels, against 20px on phones and 76 to 100px on its neighbours in the same page. On an 834 pixel screen that is a quarter of the viewport of empty ground before the heading arrives. 88px keeps the section apart from the one above it and sits inside the range the neighbouring sections use. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { body.ccmb-what .elementor-element-6f6b1519 { padding-top: 88px; } } /* -------------------------------------------------------------------------- 8 THE APP CAROUSEL OF THE EXPLAINER NEEDS ITS ARROWS ON PHONES Section 30df7ddb holds a carousel of four cards. Its two buttons are in the markup on every width and are switched to display: none below 768px, which is exactly the width where one card fills the row and the buttons are the only visible way through the deck. The same thing was true of the services carousel of the home page until round 11, and the placement it got there is reused here without a number changed: --ccmb-inset 20px, where the deck ends. Elementor gives .elementor-main-swiper width: calc(100% - 40px) as soon as arrows are on and centres it, so 20px on either side. --ccmb-btn 48px on phones, above the 44px a finger needs. --ccmb-gap 12px between the two buttons. --ccmb-lift 12px from the bottom edge of a button to the top edge of the deck. .elementor-main-swiper must stay unpositioned for this. The buttons escape its overflow only because they are measured against .elementor-swiper one level up; giving the deck a position of its own would cut them off at its top edge. The deck is pushed down by one button row so the pair has a line of its own and does not stand on the heading above it. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.ccmb-what .custom-slider { --ccmb-inset: 20px; --ccmb-btn: 48px; --ccmb-gap: 12px; --ccmb-lift: 12px; } /* The page holds display, top, left and right on these buttons with * !important on two classes, the same way the services carousel of the * home page did. These rules carry !important as well and one class more, * so they win on their own weight and not on the reading order of the * stylesheets. */ body.ccmb-what .custom-slider .elementor-swiper .elementor-swiper-button { display: flex !important; top: auto !important; bottom: calc(100% + var(--ccmb-lift)) !important; left: auto !important; right: var(--ccmb-inset) !important; width: var(--ccmb-btn) !important; height: var(--ccmb-btn) !important; margin: 0 !important; transform: none !important; } body.ccmb-what .custom-slider .elementor-swiper .elementor-swiper-button-prev { transform: translateX(calc(-100% - var(--ccmb-gap))) !important; } /* Room for the row the buttons now stand in. 48px for the button plus the * 12px it keeps to the deck, on the widget rather than on .elementor-swiper * so the margin cannot collapse through the widget container. */ body.ccmb-what .custom-slider .elementor-widget.testimonial-slider { margin-top: 60px; } } /* -------------------------------------------------------------------------- 9 THE TWO SMALLEST LINES OF COPY ON PHONES The body copy of these pages runs at 14px, which is the size the home page uses as well. Two lines fall below it and are read on a phone at arm's length like a footnote although they carry an argument: 12px "Not listed in the Shopify App Store yet. Selected merchants are testing it with us." app service page 13px "Nothing reaches Scribe until you press the button." price app, guide Both go to 14px on phones and stay at their own size above that, where the reading distance is a different one. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.ccmb-apps .ccapp-content .elementor-element-2f2e398 p.elementor-heading-title, body.ccmb-apps .ccapp-content .elementor-element-f925159 p.elementor-heading-title { font-size: 14px; } body.ccmb-on .ccx-scribe-hint { font-size: 14px; } }