zala

Hi @bangank36 Thank you for giving it a shot.. For some reason it didn't help.
I found code elsewhere that finally got it working though. Here's the code that worked for me in case it helps anyone else:
In Code Block:
<div class="marquee"> <div class="track"> <h3> insert marquee text repeated 10-15 times here </h3> </div> </div> In Custom CSS:
// MARQUEE//.marquee { position: absolute; display: flex; animation: moveLeft 1200s linear infinite; }.track { white-space: nowrap; min-width: 100%; text-align: center; }section[id*="dte-weekend-adventures-full"] { overflow-x: hidden !important; overflow-y:hidden; min-height:initial !important;.Index-page-content { padding-top:30px; padding-bottom:30px; } }@keyframes moveLeft { from { transform: translateX(0%) } to { transform: translateX(-100%) } }

CSS does not add structure to a site. It is for changing the style of elements.
Adding a map is adding structure so you need to use an embed code and/or Javascript, in a code block or other place in SS that accepts it.

Hi @bangank36 Thank you for giving it a shot.. For some reason it didn't help.
I found code elsewhere that finally got it working though. Here's the code that worked for me in case it helps anyone else:
In Code Block:
<div class="marquee"> <div class="track"> <h3> insert marquee text repeated 10-15 times here </h3> </div> </div> In Custom CSS:
// MARQUEE//.marquee { position: absolute; display: flex; animation: moveLeft 1200s linear infinite; }.track { white-space: nowrap; min-width: 100%; text-align: center; }section[id*="dte-weekend-adventures-full"] { overflow-x: hidden !important; overflow-y:hidden; min-height:initial !important;.Index-page-content { padding-top:30px; padding-bottom:30px; } }@keyframes moveLeft { from { transform: translateX(0%) } to { transform: translateX(-100%) } }

Add image 2, then add this to Design > Custom CSS
/* Hide bottom image */ .ProductItem-gallery-slides>div:nth-child(n+2) { display: none !important; }  

Add to Home > Design > Custom CSS
@media screen and (max-width:767px) { body#collection-5eb3b0706fd71a32082ffc7e #page section:first-child { min-height: 30vh; height: 40vh; } }  

Add to Settings > Advanced > Code Injection > Footer > Then save, reload & check your site on mobile.
If the code doesn't work properly, access Design > Site Styles > Disable Ajax Loading.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 640) { $('section#swimming-text-flex-split').insertBefore('section#swimming-banner-flex-split'); } }); </script>  

In Custom CSS, remove this code
.Content-outer { margin-top: 50px; }  

try if this help
<style> #dte-weekend-adventures .Index-page-content { padding-left: 0; padding-right: 0; } .marquee { width: 100%; margin: 0 auto; overflow: hidden; white-space: nowrap; margin-top: 17px; } .marquee-content { display: inline-block; margin-top: 5px; animation: marquee 15s linear infinite; } .item-collection-1 { position: relative; left: 0%; animation: swap 15s linear infinite; } @keyframes swap { 0%, 50% { left: 0%; } 50.01%, 100% { left: 100%; } } .marquee-content:hover { animation-play-state: paused } .item1 { display: inline-block; height: 70px; width: 140px; background: cyan; vertical-align: top; margin-left: 15px; } .item2 { display: inline-block; height: 70px; width: 100px; background: magenta; vertical-align: top; margin-left: 15px; line-height: 14px; } /* Transition */ @keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-100%) } } </style> <div class="marquee"> <div class="marquee-content"> <span class="item-collection-1"> Roman roads and marshmallows roasted on fire pits. Fairy tales on Snowdonia mountain trails. Bracing dips in lakes that reset. The office grind forgotten; the city air vanished. </span> <span class="item-collection-2"> Roman roads and marshmallows roasted on fire pits. Fairy tales on Snowdonia mountain trails. Bracing dips in lakes that reset. The office grind forgotten; the city air vanished.</span> </div> </div>  

Remove code I sent
Next remove your header fixed code
Next add this to Home > Design > Custom CSS to set sticky header
header.Header { position: sticky; z-index: 9999; width: 100%; top: 0px; }  

@zala
There is no place to put a redirect URL as this is not what the codes are designed to do. The codes do what the OP asked.
Did you read the URL included that explains what the targetAtttributeValue values mean?
Please start a new question describing what you want to achieve as what you want is different from what this thread is discussing.

Site URL: https://www.downtoearthadventures.com/
Hi, I'm trying to get the scrolling marquee text to scroll continuously, without a pause and on one line. Any advice? 
https://www.downtoearthadventures.com/
pw: downtoshirts
 
Examples:
https://gawoonchung.com/about
https://fourtwocreative.com/
 
Thank you!