nataniellam

Replace the previous code with the code below
@media screen and (max-width: 640px) { #collection-64cf42bd08338832a9d40ec0 { .sqs-col-12 > .sqs-row { display: flex !important; justify-content: center; #block-yui_3_17_2_1_1691304644309_1821, #block-yui_3_17_2_1_1691304644309_2944 { padding-left: 0 !important; padding-right: 0 !important; } #block-yui_3_17_2_1_1691304644309_2357 { padding-left: 5px !important; padding-right: 5px !important; a.sqs-block-button-element--small { padding: 13px 15px !important; font-size: 9px !important; } } } } }  

Not always easy to translate from a stand-alone codepen to your website, elements like "body" need to be handled with care because that CSS will affect the whole website. This is a start hopefully, add all as is to a code block:
<style> .container { //position: absolute; //transform: translate(-50%, -50%); //top: 40%; //left: 50%; } .glitch { color: rgb(223, 191, 191); position: relative; font-size: 9vw; margin: 70px 200px; animation: glitch 5s 5s infinite; } .glitch::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: -5px 0 magenta; background: black; overflow: hidden; top: 0; animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite; } .glitch::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -5px 0 lightgreen; background: black; overflow: hidden; top: 0; animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite; } @keyframes glitch { 1%{ transform: rotateX(10deg) skewX(90deg); } 2%{ transform: rotateX(0deg) skewX(0deg); } } @keyframes noise-1 { $steps: 30; @for $i from 1 through $steps { #{percentage($i*(1/$steps))} { $top: random(100); $bottom: random(101 - $top); clip-path: inset(#{$top}px 0 #{$bottom}px 0); } } } @keyframes noise-2 { $steps: 30; @for $i from 0 through $steps { #{percentage($i*(1/$steps))} { $top: random(100); $bottom: random(101 - $top); clip-path: inset(#{$top}px 0 #{$bottom}px 0); } } } .scanlines { overflow: hidden; mix-blend-mode: difference; } .scanlines::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: repeating-linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, 0.05) .5%, transparent 1% ); animation: fudge 7s ease-in-out alternate infinite; } @keyframes fudge { from { transform: translate(0px, 0px); } to { transform: translate(0px, 2%); } } .glow { @extend .glitch; text-shadow: 0 0 1000px rgb(223, 191, 191); color: transparent; position: absolute; top: 0; } .subtitle { font-family: Arial, Helvetica, sans-serif; font-weight: 100; font-size: .8vw; color: rgba(165, 141, 141, .4); text-transform: uppercase; letter-spacing: 1em; text-align: center; position: absolute; left: 17%; animation: glitch-2 5s 5.02s infinite; } @keyframes glitch-2 { 1%{ transform: rotateX(10deg) skewX(70deg); } 2%{ transform: rotateX(0deg) skewX(0deg); } } </style> <div class="container"> <div class="glitch" data-text="ELISABÉTH">ELISABÉTH</div> <div class="glow">ELISABÉTH</div> <p class="subtitle">IMPRACTICAL DEVELOPER</p> </div> <div class="scanlines"></div> Might work for you, but had to disable a few lines so that it's a part of the page, but you can experiment.
(FYI The CSS needs to go inside <style></style> tags.)
Hope that helps!

Add a Code Block
<ul class="codepen"> <li> <div class="section-title"> <h2>Section 1</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p> </div> </li> <li class="active"> <div class="section-title"> <h2>Section 2</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p> </div> </li> <li> <div class="section-title"> <h2>Section 3</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p> </div> </li> <li> <div class="section-title"> <h2>Section 4</h2> </div> <div class="section-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p> </div> </li> </ul> <style> ul.codepen { display: flex; min-height: 100vh; max-height: 100vh; margin: 0; padding: 0; overflow: hidden; list-style-type: none; } ul.codepen li { flex: 1; display: flex; align-items: stretch; padding: 20px; background: #E74C3C; cursor: pointer; transition: all 0.5s ease; } ul.codepen li:hover { background: #e53f2e; } ul.codepen li.active { flex: 5; background: #fff; cursor: default; } ul.codepen li.active h2 { color: #E74C3C; } ul.codepen li.active .section-content { flex: 4; opacity: 1; transform: scaleX(1); color: #E74C3C; } ul.codepen li .section-title { flex: 1; display: flex; align-items: center; width: 100%; margin: 0; padding: 0; text-align: center; color: white; } ul.codepen li .section-title h2 { margin: 0; transform: rotate(-90deg); white-space: nowrap; } ul.codepen li .section-content { flex: 1; display: flex; align-items: center; margin: 0; padding: 0; opacity: 0; transition: all 0.25s 0.1s ease-out; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var section = $('li'); function toggleAccordion() { section.removeClass('active'); $(this).addClass('active'); } section.on('click', toggleAccordion); </script>