/* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .header { background: #2A3647; height: 84px; } .footer { background: #FFFFFF; color: #192435; font-size: 18px; font-weight: 300; line-height: 1.5; padding: 80px 0 40px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer-upper { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 48px; padding-top: 80px; border-style: solid hidden hidden hidden; border-color: #E1E1FF; } .footer-upper > div { display:flex; flex-flow: column; } .footer-upper a { line-height: 30px; text-decoration: none; color: #192435; margin-bottom: 10px; display: inline-block; position: relative; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); width: fit-content; } .footer-upper a::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 3px; left: 0; opacity: 0; border-radius: 1px; background-color: #017737; transform-origin: bottom right; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1); transition-delay: 0.15s; } .footer-upper a:hover { transform: translateY(-2px); } .footer-upper a:hover::after { transform: scaleX(1); opacity: 1; transform-origin: bottom left; } .column-title { font-weight: 700; margin-bottom: 10px; color: #192435; } .social-row { margin-top: 44px; display: flex; justify-content: end; } .social-row a { opacity: 72%; } .social-row a:hover { opacity: 100%; } .social-row svg { height: 25px; width: 25px; margin-left: 20px; fill: #192435; } .footer-lower { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; font-size: 14px; line-height: 25px; } .lower-left { display: flex; } .lower-left a { opacity: 72%; text-decoration: none; color: #192435; text-decoration-thickness: 1px !important; text-decoration-color: #192435 !important; } .lower-left a:hover { text-decoration: underline; opacity: 100%; } .pd { opacity: 72%; } .divider { margin: 0 10px; } @media screen and (max-width: 768px) { .social-row { justify-content: start; } .social-row svg { margin-left: 0; margin-right: 20px } .logo { margin: 0 auto; } } .ot-sdk-show-settings { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; background: none; border: none; opacity: 72%; cursor: pointer; color: #192435; } .ot-sdk-show-settings:hover { text-decoration: underline; opacity: 100%; } /*# sourceMappingURL=styles.css.map */

Campaings: Revert order of row items in mobile template

ohlr

ohlr Member Posts: 24

10 Comments

First Anniversary

5 Up Votes

Name Dropper

May 9 edited June 8 in Ideas and Product Feedback #1

lets say you have a row with two columns like this:

-----

text | image

------

in mobile this becomes:

------

text

image

-------

I would like it to become:

-------

image

text

--------

with a button like reverse order on mobile

Tagged:

1

1

1 votes

Active · Last Updated May 9

Categories

/* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .header { background: #2A3647; height: 84px; } .footer { background: #FFFFFF; color: #192435; font-size: 18px; font-weight: 300; line-height: 1.5; padding: 80px 0 40px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer-upper { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 48px; padding-top: 80px; border-style: solid hidden hidden hidden; border-color: #E1E1FF; } .footer-upper > div { display:flex; flex-flow: column; } .footer-upper a { line-height: 30px; text-decoration: none; color: #192435; margin-bottom: 10px; display: inline-block; position: relative; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); width: fit-content; } .footer-upper a::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 3px; left: 0; opacity: 0; border-radius: 1px; background-color: #017737; transform-origin: bottom right; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1); transition-delay: 0.15s; } .footer-upper a:hover { transform: translateY(-2px); } .footer-upper a:hover::after { transform: scaleX(1); opacity: 1; transform-origin: bottom left; } .column-title { font-weight: 700; margin-bottom: 10px; color: #192435; } .social-row { margin-top: 44px; display: flex; justify-content: end; } .social-row a { opacity: 72%; } .social-row a:hover { opacity: 100%; } .social-row svg { height: 25px; width: 25px; margin-left: 20px; fill: #192435; } .footer-lower { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; font-size: 14px; line-height: 25px; } .lower-left { display: flex; } .lower-left a { opacity: 72%; text-decoration: none; color: #192435; text-decoration-thickness: 1px !important; text-decoration-color: #192435 !important; } .lower-left a:hover { text-decoration: underline; opacity: 100%; } .pd { opacity: 72%; } .divider { margin: 0 10px; } @media screen and (max-width: 768px) { .social-row { justify-content: start; } .social-row svg { margin-left: 0; margin-right: 20px } .logo { margin: 0 auto; } } .ot-sdk-show-settings { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; background: none; border: none; opacity: 72%; cursor: pointer; color: #192435; } .ot-sdk-show-settings:hover { text-decoration: underline; opacity: 100%; } /*# sourceMappingURL=styles.css.map */