Jump to content

out of bounds website

Go to solution Solved by Ziggy,

Recommended Posts

Hello, I have a problem with my site www.kotorfitness.com:
 

it goes out of bounds, and I can scroll more than full width to the right. If you scroll to the bottom the problem "resolves" itself.

Please, look at the attached file or enter the website to better comprehend.

It's a very strange problem, hope I can have your help!

Have a good day!

offsite.PNG

Link to comment
  • Replies 13
  • Views 358
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Do you have any custom coding on your website?

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

If you could, that might be helpful.

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

If you could, that might be helpful.

here it goes my css:
 

/* header TEXT COLOR ON HOVER */
div.header-nav-item>a:hover {
    color: #EF0307 !important;
}

#page {
 max-width: 1920px; /*Adjust this number as desired.*/
}

section[data-section-id="6538b8c5674464033fb11b47"]{
      margin: 0px;
      padding-bottom: 0px;
}
#block-yui_3_17_2_1_1698216068651_4174{
  padding-bottom: 0px;
  padding-top: 15px;
}

/* IMMAGINI SENZA BORDO PC */
@media screen and ( min-width: 768px ) {
  .products.collection-content-wrapper .list-grid {
    column-gap: 0px;
    grid-row-gap: 30PX;
    
    }
  }
@media screen and ( max-width: 767px ) {
  .products.collection-content-wrapper .grid-item {
  
    margin-bottom: 8px;
    
    }
  }

section[data-section-id="64e9944865739144347b59fb"] .content-wrapper {
    padding-top: 20px;
}


/* Input Styles */
input[type="number"] {
      padding: 10px;
  /* ... */
}
.sqs-add-to-cart-button-wrapper{
      margin-left: 10px;
 }

  /* INIZIO MODIFICAZIONI CARRELLO*/

.cart-title {
      text-align:center;
}
a.cart-row-title{
      font-weight:bold;
}
body#cart #page {
    padding-left: 15vw;
      padding-right: 15vw;
}

a.cart-row-title, input.cart-row-qty-input, .cart-row-qty-dec, button.cart-row-qty-inc, .cart-row-remove svg, .cart-row-price, .cart-row-remove{
    padding-top: 3vw;
}
.cart-row-remove svg, .item-remove div{
    padding-top: 120px;
}


div.cart-checkout {
    align-items: flex-end;
}


  /* FINE MODIFICAZIONI CARRELLO*/

.sqs-add-to-cart-button-wrapper:after{
    content: "Ordina ora ed il tuo articolo sarà spedito " attr(data-spedizione);
    font-size: 14px;
    margin-top: 5px !important;
      text-align: center;
      margin-bottom: 5px;
    display: block;
      color: red;
}


.product-quantity-input {
      margin-bottom: 12px;
      padding-right: 10px;
}

/* IN SCONTO*/
.product-mark.sale {
    font-size: 0;
}
.product-mark.sale:before {
    font-size: 15px;
    content: "IN SCONTO";
}
/* IN SCONTO*/

/* Flex Display for Checkout */


/* Pagination Divider Line */
.item-pagination--prev-next {
  border-top: 1px solid #000;
}

/* Mobile Menu Background Image */
.header-menu-bg {
  background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2f543525-7df4-4a71-863c-79639242d0f2/dflx4iy-205d96aa-6f52-4e71-b5ed-c1ac02ac2eb5.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzJmNTQzNTI1LTdkZjQtNGE3MS04NjNjLTc5NjM5MjQyZDBmMlwvZGZseDRpeS0yMDVkOTZhYS02ZjUyLTRlNzEtYjVlZC1jMWFjMDJhYzJlYjUuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.accsDwYbLRj3N1t-qiNIYEVQSYgnKunRoXcREtvseWY);
  background-size: cover;
  background-position: center;
}
.header-menu a {
  text-shadow: 0 0 3px #FAFAFA;
}


/* Selection Highlight Color */
::selection {
  background: #F78183;
  color: #FAFAFA;
}

::-moz-selection {
  background: #F78183;
  color: #FFFFFF;
}

/* Mobile Menu Border Color */
.header-menu-bg {
  border: 10px solid #EF0307;
}

/* Animated Gradient Header Font */
h1 {
  display: inline-block;
  background-image: linear-gradient(-45deg, #EF0307, #ff6e7f, #EA384D, #b31217) !important;
  background-size: 400% !important;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

/* Gradient Animation Keyframes */
@-webkit-keyframes Gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@-moz-keyframes Gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes Gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Mobile Menu Icon Color */
.burger-inner > div {
  background-color: #EF0307 !important;
}

/* Hide Skip Link */
a.header-skip-link.sqs-button-element--primary {
  display: none;
}

/* Comment Box Visibility */
.squarespace-comments .new-comment-area.anon-comments-off.logged-in-commenting-unsupported {
  display: block;
}

/* Responsive Layout for Sections */
/* Section Styles */
section[data-section-id="653b8cdfea302e6cd186ad8c"] {
  display: block;
}

/* Section Styles */
section[data-section-id="659bf9fbad50ba2d8b2d989e"] {
  display: block;
}

/* FORMAT VIDEO */
.sqs-native-video .native-video-player {
    padding-bottom: 60% !important;
      padding-top: 90%;
}

/* ICOSPHERE */
#contenitore {
  display: flex;
  align-items: center;
}

#block-yui_3_17_2_1_1703669739555_14242,
#block-c506ff9b5be10de19f55 {
  width: 50%;
  box-sizing: border-box;
}

#block-yui_3_17_2_1_1703669739555_14242 {
  float: left;
}

#block-c506ff9b5be10de19f55 {
  float: right;
  margin-top: 100px;
}

@media only screen and (max-width: 767px) {
  #contenitore {
    flex-direction: column; /* Impila gli elementi verticalmente su schermi più piccoli */
  }
  
  #block-yui_3_17_2_1_1703669739555_14242,
  #block-c506ff9b5be10de19f55 {
    width: 100%; /* Occupa l'intera larghezza del contenitore su schermi più piccoli */
  }
  #block-c506ff9b5be10de19f55 {
  margin-top: 1px;
}
}
/* GRIPBREAKER */
#contenitore {
  display: flex;
  align-items: center;
}

#block-yui_3_17_2_1_1703667864501_6546,
#block-a16849fac79d282dabf4 {
  width: 50%;
  box-sizing: border-box;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-top: 0px;
}

#block-yui_3_17_2_1_1703667864501_6546 {
  float: left;
}

#block-a16849fac79d282dabf4 {
  float: right;
  margin-top: 255px;
}

@media only screen and (max-width: 767px) {
  #contenitore {
    flex-direction: column; /* Impila gli elementi verticalmente su schermi più piccoli */
  }
  
  
  #block-yui_3_17_2_1_1703667864501_6546,
  #block-a16849fac79d282dabf4 {
    width: 100%; /* Occupa l'intera larghezza del contenitore su schermi più piccoli */
}
}
#contenitore {
  display: flex;
  align-items: center;
}

#block-yui_3_17_2_1_1711022436773_32847,
#block-yui_3_17_2_1_1711022436773_31573 {
  width: 50%;
  box-sizing: border-box;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-top: 0px;
}

#block-yui_3_17_2_1_1711022436773_32847 {
  float: left;
  margin-top: 205px;
}

#block-yui_3_17_2_1_1711022436773_31573 {
  float: right;
  margin-top: 0px;
}

@media only screen and (max-width: 767px) {
  #contenitore {
    flex-direction: column; /* Impila gli elementi verticalmente su schermi più piccoli */
  }
  
  #block-yui_3_17_2_1_1711022436773_32847,
  #block-yui_3_17_2_1_1711022436773_31573 {
    width: 100%; /* Occupa l'intera larghezza del contenitore su schermi più piccoli */
  }
}

/* GR4NAT4 */
#contenitore {
  display: flex;
  align-items: center;
}

#block-yui_3_17_2_1_1704462176899_4488,
#block-4db6b244186bd608b4bd {
  width: 50%;
  box-sizing: border-box;
}

#block-yui_3_17_2_1_1704462176899_4488 {
  float: left;
}

#block-4db6b244186bd608b4bd {
  float: right;
  margin-top: 90px;
}

@media only screen and (max-width: 767px) {
  #contenitore {
    flex-direction: column; /* Impila gli elementi verticalmente su schermi più piccoli */
  }
  
  #block-yui_3_17_2_1_1704462176899_4488,
  #block-4db6b244186bd608b4bd {
    width: 100%; /* Occupa l'intera larghezza del contenitore su schermi più piccoli */
  }
  
  #block-4db6b244186bd608b4bd {
    margin-top: 1px;
  }
}
/* GR4NAT4 */

/* overthetop */
#block-0a2367af364f0723383c{
    margin-top: 15px;
      margin-bottom: 10px;
  }
/* overthetop */

/*BLOG FORZA POLSO RIEPILOGO*/
#block-yui_3_17_2_1_1714717499755_13932 {
    padding-top: 1px;
      padding-bottom: 1px;
      margin-bottom: -15px;
      display: block;
  margin-left: auto;
  margin-right: auto;
  width: 86%;
  }

#block-yui_3_17_2_1_1713852600913_33501{
    padding-bottom: 1px;
      padding-left: 1vw;
      padding-top: 1vw;
  }
/*BLOG FORZA POLSO RIEPILOGO*/

/*INSTAGRAM FEED ROTATION OF IMAGES*/
.sqs-gallery-design-grid-slide:nth-child(odd) .margin-wrapper {
  transform: rotate(-3deg);
}
.sqs-gallery-design-grid-slide:nth-child(even) .margin-wrapper {
  transform: rotate(3deg);
}

Link to comment

I can't see anything in there that would cause this, though there are a lot of elements set to 100%. Do you have anything in header and footer code injection?

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

Yes, 
 

<meta name="msvalidate.01" content="6AC085E2BEE9E4B3BD8F5BB06645302F" />
<meta name="google-site-verification" content="Gafd6xQAs7iMcSXTigus7WMg5FgLaH8-vm_NluKJ79w" />

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "l8qxd3qo7c");
</script>

<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('consent', 'default', {
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied'
 });
 gtag('js', new Date());
 gtag('config', 'AW-{AW-ID}');
 let squarespaceCookies = {};
 if (window.getSquarespaceCookies) {
   squarespaceCookies = window.getSquarespaceCookies();
 }
 const consentValue = squarespaceCookies.marketing === 'accepted' ? 'granted' :  'denied';
 const consentObj = { 
  'ad_storage': consentValue,
  'ad_user_data': consentValue,
  'ad_personalization': consentValue
 };
 gtag('consent', 'update', consentObj);
 window.onCookieBannerInteraction = () => {
   let squarespaceCookies = {};
   if (window.getSquarespaceCookies) {
     squarespaceCookies = window.getSquarespaceCookies();
   }
   const consentValue = squarespaceCookies.marketing === 'accepted' ? 'granted' :  'denied';
  const consentObj = { 
     'ad_storage': consentValue,
     'ad_user_data': consentValue,
     'ad_personalization': consentValue
   };
   gtag('consent', 'update', consentObj);
 }
</script>

 

and 

 

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    var products = document.querySelectorAll('.product-price'), sf;
    for (sf=0; sf<products.length; sf++) {
      products[sf].innerHTML = products[sf].innerHTML.replace(/,00/,"");
    }
  });
</script>

<script>
function calcolaDataSpedizione() {
    var oggi = new Date();
    if (oggi.getDay() === 5) { 
        oggi.setDate(oggi.getDate() + 3); 
    } else if (oggi.getDay() === 6) { 
        oggi.setDate(oggi.getDate() + 2); 
    } else {
        oggi.setDate(oggi.getDate() + 1); 
    }
    var giorno = oggi.getDate();
    var mese = oggi.getMonth() + 1; 
    var anno = oggi.getFullYear();
    var dataFormattata = giorno + '/' + mese + '/' + anno;
    var buttonWrapper = document.querySelector('.sqs-add-to-cart-button-wrapper');
    buttonWrapper.setAttribute('data-spedizione', "il giorno " + dataFormattata);
}
calcolaDataSpedizione();
</script>

Link to comment

Can't see any errors there either. Can you test your website in safe mode with this link:

www.kotorfitness.com/config/safe/

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

Darn, the only thing I can offer is to see if I can fix this for you directly on your website, but I would need admin access for that.

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
1 minute ago, Ziggy said:

Darn, the only thing I can offer is to see if I can fix this for you directly on your website, but I would need admin access for that.

Sure, send me your e-mail address

Link to comment
  • Solution

I've hidden the overflow, which has the desired outcome, but I'm not sure it's the root 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

The root of the problem is SS is setting widths on image elements of the fluid engine summary blocks, before the images are loaded. Because the summary item is position absolute and has a left set, width is added to the left and causes overflow. The last summary item creates the maximum width.

If you remove the overflow ruleset, reload the page, scroll left, you can see the unwanted space, scroll down the page into the summary block and notice how the overflow disappears after the images load. SS is removing the width properties from the images on load and so the overflow disappears.

I suggest removing the overflow ruleset and trying the following.

img[ data-src ]:not( [ src ] ):not( [ srcset ] ) {
    
      width: unset !important;
      
      }

This is a very general ruleset and I can't guarantee that it won't cause issues. You may want to narrow the scope of where the effect is happening, say with a block id.

This feels like Classic Engine residue or that FE is just a wrapper around the CE blocks and FE doesn't do the right thing.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.