Jump to content

Shopping cart "out of frame" on mobile

Go to solution Solved by verticalberto,

Recommended Posts

  • Replies 11
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

It looks like you probably have an element on the page that is exceeding the viewport width and therefore stretching the page forcing you to scroll horizontally, can you share your website URL so I can troubleshoot it?

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

I can't replicate the issue, which page was it on? But I can see this in the footer:

image.png.f2bb705d4c6504139ed10c1185138ede.png

There's some plain text in the Footer Code Injection, which might be part of the problem? 

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
2 hours ago, Ziggy said:

I can't replicate the issue, which page was it on? But I can see this in the footer:

image.png.f2bb705d4c6504139ed10c1185138ede.png

There's some plain text in the Footer Code Injection, which might be part of the problem? 

Thank you Ziggy for your assistance!

So you can see the shopping cart on mobile? I'm finding it extremely hard to figure out where to click once you add an item to the cart.

How can I check the footer code injection? Should I share the whole code here?

Link to comment
12 hours ago, verticalberto said:

Thank you Ziggy for your assistance!

So you can see the shopping cart on mobile? I'm finding it extremely hard to figure out where to click once you add an item to the cart.

How can I check the footer code injection? Should I share the whole code here?

You can send all code here, then we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, Ziggy said:

I can't replicate the issue, which page was it on? But I can see this in the footer:

image.png.f2bb705d4c6504139ed10c1185138ede.png

There's some plain text in the Footer Code Injection, which might be part of the problem? 

 

27 minutes ago, tuanphan said:

You can send all code here, then we can help easier

Thanks guys, here it is:

HEADER:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/28c435a3-d198-4084-8cdd-2c9492af9153/favicon.ico?format=100w"/>


FOOTER:
<!-- multilingual -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
    /* SETUP MULTI-LANGUAGE */
    var defaultLanguage = 'it';
    var lang = location.pathname.split("/")[1];
    var defaultClass = 'lang-'+defaultLanguage+'';
    var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
    if (lang == "" || lang.length > 2 ){
      var lang = defaultLanguage;
    }

    /* ADD LANGUAGE CLASSES */
    $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
    $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
      var langType = $(this).attr('href').split("/")[1];
      var multiLanguageClass = 'multilanguage lang-' + langType + '';
      if (undefined !== langType && langType.length <= 2) 
        $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
    });
    $('nav button').each(function () {
      var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
      var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
      if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
        $(this).addClass(multiLanguageClass);
    });

    /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
    if (lang == "en") {
      $('a[href="/"]').attr("href", "/en/home/");
    }

    /* ADD EXCLUSION NAV ITEMS */
    $('.exclude-me,.exclude-me a').addClass('exclude');
    $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');

    /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
    $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();

    /* SETUP LANGUAGE SWITCHER */
    $('body').prepend('<div class="language"><a href="/en/home" class="lang-en"><span class="flag-icon flag-icon-us"></span></a> <a href="/it/home/" class="lang-es"><span class="flag-icon flag-icon-mx"></span></a></div>');

  });
</script>

<!-- Scroll To Top Button HTML -->
<button id="wm-back-to-top">
  <div class="btt-background"></div>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Angle Up</title>
      <path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M4 42 l28 -26 L60 42" stroke-linejoin="round" stroke-linecap="round"></path>
    </svg>
  </div>
</button>

<!-- Scroll To Top Button Javascript -->
<script>
(function() {
  let throttlePause;

  document.addEventListener('click', function(e) {
    if (!e.target.closest('#wm-back-to-top')) return;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })

  document.addEventListener('DOMContentLoaded', function(){
    let btt = document.querySelector('#wm-back-to-top');
    if (btt?.closest('.sqs-block-content')){
      btt.closest('.sqs-block-content').style.display = 'inline';
    }
  });

  const throttle = (callback, time) => {
    if (throttlePause) return;

    throttlePause = true;
    setTimeout(() => {
      callback();
      throttlePause = false;
    }, time);
  };

  const checkPos = () => {
    let pos = document.documentElement.scrollTop,
        revealHeight = window.innerHeight * 0,
        bttButton = document.querySelector('#wm-back-to-top');
    if (pos >= revealHeight) {
      bttButton.classList.add('show');
    } else {
      bttButton.classList.remove('show');
    }
  }

  window.addEventListener("scroll", () => {
    throttle(checkPos, 150);
  });
  window.addEventListener('DOMContentLoaded', checkPos)
}());
</script>

<!-- TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.1) -->
<script>
  $(".header-nav-folder-title[href='/percorsi'], .header-menu-nav-item a[href='/OLD-LINK']").click(function() {
     window.location.href = "/our-walks-italy";
  });
  
    $(".header-nav-folder-title[href='/cluego-overview'], .header-menu-nav-item a[href='/OLD-LINK']").click(function() {
     window.location.href = "/cluego";
  });
</script>

Edited by verticalberto
remove code
Link to comment

Remove the line circled, but also note the underlined Do not republish, please remove the code from this forum.

image.thumb.png.efe7a6c08fdb16f410e23e83fed8a2a2.png

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
17 minutes ago, Ziggy said:

Remove the line circled, but also note the underlined Do not republish, please remove the code from this forum.

image.thumb.png.efe7a6c08fdb16f410e23e83fed8a2a2.png

Sorry Ziggy I didn't notice that line. I have edited my previous post.
Thank you for fixing the plain text, however I still can't see the shopping cart from mobile 😞

Link to comment
1 minute ago, verticalberto said:

Thank you for fixing the plain text, however I still can't see the shopping cart from mobile 😞

Make sure you have a backup first, but can you try removing the code for the "scroll to top", both the HTML and script?

If that doesn't work then try removing all of the injected code, I'm trying to identify which code is causing the problem.

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
34 minutes ago, Ziggy said:

Make sure you have a backup first, but can you try removing the code for the "scroll to top", both the HTML and script?

If that doesn't work then try removing all of the injected code, I'm trying to identify which code is causing the problem.

I have removed all the injection code, yet no luck. The cart is still not visible and we still got the horizontal scroll bar in the editor

Edited by verticalberto
Link to comment
  • Solution

I finally found the issue. I had added this CSS Custom code to make sure that the menu would stay in one line and it was causing the mobile version to stretch out the shopping cart.

// wide menu
.header-nav {

width: 90% !important;

flex: 1 1 90% !important;

}

.header-title-nav-wrapper {

flex: 1 0 80% !important;

}

 

Do you guys have any idea to fix the code for mobile so that I can keep using it?

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.