Jump to content

Embedded code in code block appearing in wrong place in my live site vs when editing (Desktop) and not appearing at all in Mobile.

Recommended Posts

Hi all,

As the title says, when editing my page I can see my embedded script in the right location, pictured below:

image.thumb.png.ca8887f29c3282e68e9a1059a123c0aa.png

It's also important to note that it is aligned left perfectly on the edited site.

Here is a picture of it on the live site, not aligned left (A longer word will make it appear far more to the left)

image.thumb.png.49329457f03fff289ec4789e5ac33403.png

 

Maybe pointless to include a screenshot of the mobile considering it is not even showing up.

 

Any clue why this could be happening? Please help, this is the last step I have until It's finally done...!

Edited by StampJonah
typo
Link to comment
  • Replies 4
  • Views 371
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I've found that adding this Custom CSS really helps with the warning message on code blocks:

https://squarefortytwo.com/squarespace-guides/spacing-issue-on-code-block-warning-message

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
      display: none !important;
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
13 minutes ago, Ziggy said:

I've found that adding this Custom CSS really helps with the warning message on code blocks:

https://squarefortytwo.com/squarespace-guides/spacing-issue-on-code-block-warning-message

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
      display: none !important;
}

So, it got rid of the warning message which is nice, maybe it helped a little bit.

But, the finished product still is off of the same space. I can move it on the edited site to be off space and it can get CLOSE, but I may have to edit the code to adjust the pixels to get the right positioning. Now the other issue is that it's not aligned left on the live site, but it IS on the edited site.. WTF! :( 

Here's my code..

 

<!DOCTYPE html>
<html>
<head>
    <title>Vertical Carousel</title>
    <style>
        .carousel-text {
            position: absolute;
            top: 50%;
            top: calc(50% + 15px);
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5em;
            font-weight: 800;
            color: white;
            opacity: 0;
            transition: opacity 1s, color 1s;
            font-family: 'Kanit', sans-serif;
            text-align: left;
            padding: 0 5px;
            box-sizing: border-box;
            width: calc(100% - 10px);
        }

        .carousel-text.active {
            opacity: 1;
            top: calc(50% + 20px); /* Adjusted top value to move down by 10 pixels */
        }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Kanit:800" rel="stylesheet">
</head>
<body>
    <div id="carousel-container">
        <div class="carousel-text" style="color: #ff6b6b;">Song.</div>
        <div class="carousel-text" style="color: #ffb347;">Book.</div>
        <div class="carousel-text" style="color: #ffd1dc;">Article.</div>
        <div class="carousel-text" style="color: #a0c4ff;">Video.</div>
        <div class="carousel-text" style="color: #9fdf9f;">Album.</div>
        <div class="carousel-text" style="color: #f0e68c;">Thesis.</div>
        <div class="carousel-text" style="color: #f4a460;">Podcast.</div>
        <div class="carousel-text" style="color: #b39ddb;">Novel.</div>
        <div class="carousel-text" style="color: #ffcc80;">Website.</div>
        <div class="carousel-text" style="color: #90caf9;">Organization.</div>
        <div class="carousel-text" style="color: #80cbc4;">Magazine.</div>
        <div class="carousel-text" style="color: #ffab91;">Speech.</div>
        <div class="carousel-text" style="color: #81d4fa;">Dissertation.</div>
    </div>

    <script>
        window.onload = function() {
            const texts = document.querySelectorAll('.carousel-text');
            let index = 0;
            let colorIndex = 0;
            const colors = ['#ff6b6b', '#ffb347', '#ffd1dc', '#a0c4ff', '#9fdf9f', '#f0e68c', '#f4a460', '#b39ddb', '#ffcc80', '#90caf9', '#80cbc4', '#ffab91', '#81d4fa'];
            texts[index].style.opacity = '1';
            texts[index].style.color = colors[colorIndex];
            setInterval(() => {
                texts[index].style.opacity = '0';
                index++;
                colorIndex++;
                if (index === texts.length) {
                    index = 0;
                }
                if (colorIndex === colors.length) {
                    colorIndex = 0;
                }
                setTimeout(() => {
                    texts[index].style.color = colors[colorIndex];
                    texts[index].style.opacity = '1';
                }, 1000);
            }, 3000);
        }
    </script>
</body>
</html>

Link to comment

I have a carousel coded that provides examples of media and shows up in different colors to introduce the viewer to our mission.

Here is my code: 

<!DOCTYPE html>
<html>
<head>
    <title>Vertical Carousel</title>
    <style>
        .carousel-text {
            position: absolute;
            top: 50%;
            top: calc(50% + 40px); /* Adjusted top value to move down by 10 pixels */
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3.5em; /* Adjusted font size to be 50% smaller */
            font-weight: 800;
            color: white;
            opacity: 0;
            transition: opacity 1s, color 1s;
            font-family: 'Kanit', sans-serif;
            text-align: center; /* Aligned text to center */
            padding: 0 5px;
            box-sizing: border-box;
            width: calc(100% - 10px);
        }

        .carousel-text.active {
            opacity: 1;
        }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Kanit:800" rel="stylesheet">
</head>
<body>
    <div id="carousel-container">
        <div class="carousel-text" style="color: #ff6b6b;">Song.</div>
        <div class="carousel-text" style="color: #ffb347;">Book.</div>
        <div class="carousel-text" style="color: #ffd1dc;">Article.</div>
        <div class="carousel-text" style="color: #a0c4ff;">Video.</div>
        <div class="carousel-text" style="color: #9fdf9f;">Album.</div>
        <div class="carousel-text" style="color: #f0e68c;">Thesis.</div>
        <div class="carousel-text" style="color: #b39ddb;">Novel.</div>
        <div class="carousel-text" style="color: #ffab91;">Speech.</div>
    </div>

    <script>
        window.onload = function() {
            const texts = document.querySelectorAll('.carousel-text');
            let index = 0;
            let colorIndex = 0;
            const colors = ['#ff6b6b', '#ffb347', '#ffd1dc', '#a0c4ff', '#9fdf9f', '#f0e68c', '#f4a460', '#b39ddb', '#ffcc80', '#90caf9', '#80cbc4', '#ffab91', '#81d4fa'];
            texts[index].style.opacity = '1';
            texts[index].style.color = colors[colorIndex];
            setInterval(() => {
                texts[index].style.opacity = '0';
                index++;
                colorIndex++;
                if (index === texts.length) {
                    index = 0;
                    colorIndex = 0; // Reset colorIndex to start from the first color again
                }
                setTimeout(() => {
                    texts[index].style.color = colors[colorIndex];
                    texts[index].style.opacity = '1';
                }, 1000);
            }, 3000);
        }
    </script>
</body>
</html>

 

It shows up in a different spot on editor: 

image.thumb.png.985adcf1f818cd54c033a5f08a7924f6.png

Then on live: 

image.thumb.png.0ea9dfc8768f0662f4a9aa19c6631411.png

 

Mobile is perfect on editor: image.thumb.png.79e30aa96c9ad12abcd18d79ae843b2b.png

 

But doesn't appear on mobile at all until about 1 minute after loading the page.

 

 

Absolutely bonkers. Is there a clear fix? HAS NOBODY EVER USED JAVASCRIPT CAROUSELS IN SQUARESPACE? Literally at my wits end. Squarespace, put out a working product. Need help with this sorely.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.