Jump to content

Mobile breakpoint causing horizontal scroll on homepage

Recommended Posts

Site URL: https://unchartedtrvl.com

Hi there!

Just want to say that Squarespace's support has been out of this world with my first experience thus far using it.

I've hit a bit of a wall trying to figure out why my site, on mobile, still acts like it's on a desktop. When loaded on mobile, it seems fine at first glance. However, the breakpoint seems "broken" as the horizontal scroll reveals way more than needed and zooming out shows a nearly desktop version of the site.

Any help?

https://unchartedtrvl.com

Thanks!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 3/15/2022 at 11:44 AM, justaguywhodoesthings said:

Site URL: https://unchartedtrvl.com

Hi there!

Just want to say that Squarespace's support has been out of this world with my first experience thus far using it.

I've hit a bit of a wall trying to figure out why my site, on mobile, still acts like it's on a desktop. When loaded on mobile, it seems fine at first glance. However, the breakpoint seems "broken" as the horizontal scroll reveals way more than needed and zooming out shows a nearly desktop version of the site.

Any help?

https://unchartedtrvl.com

Thanks!

I check that this code makes your site crop a little on the left

image.thumb.png.967d2579f4c660a2f1e88458a6615b66.png

If you want to apply it on desktop only, you can set a media query with desktop breakpoint in order not affect to mobile display

@media only screen and (min-width: 1024px) {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

Let me know how it works on your site

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 3/15/2022 at 2:00 AM, bangank36 said:

I check that this code makes your site crop a little on the left

image.thumb.png.967d2579f4c660a2f1e88458a6615b66.png

If you want to apply it on desktop only, you can set a media query with desktop breakpoint in order not affect to mobile display

@media only screen and (min-width: 768px) {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

Let me know how it works on your site

Do I apply this at the top of my custom CSS? Also, this issue is persistent on mobile and tablet as well. Thank you for replying so swiftly!

Link to comment
12 hours ago, justaguywhodoesthings said:

Do I apply this at the top of my custom CSS? Also, this issue is persistent on mobile and tablet as well. Thank you for replying so swiftly!

@bangank36 so it seems the issue has something to do with our testimonial code but it is above me and I cannot figure out what line of code is causing it. Sorry if the code is bloated or not simplified.

// Testimonial Slider
section[data-section-id="61eb4821a110523ca58c2c99"] {
	.summary-thumbnail {
    border: none;
  }
  .summary-item-list {
    pointer-events: none;
    .summary-item {
      padding-left: 20px !important;
      padding-right: 20px !important;
@media screen and (min-width: 640px) {
	padding-left: 100px !important;
	padding-right: 100px !important;
      }
    }
  }
  .summary-item-list img {
    border-radius: 100% !important;
    height: 150px !important;
    width: 150px !important;
  }
  .summary-thumbnail-outer-container {
    height: 150px !important;
    width: 150px !important;
    margin: 0 auto;
  }
  .summary-item-list img {
    border-radius: 100% !important;
    height: 150px !important;
    width: 150px !important;
  }
  .summary-title {
    margin-top: 30px !important;
    font-size: 1rem !important;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: proxima-nova;
    text-transform: uppercase;
    text-align: center !important;
    pointer-events: none;
  }
  @media screen and (max-width: 640px) {
   .sqs-block-summary-v2
   .summary-block-setting-design-carousel
   .summary-carousel-pager {
     width: 80%;
    }
  }
}
#block-yui_3_17_2_1_1637251576741_11475 {
	  margin-top: -25px !important;
}
// Testimonial Slider
section[data-section-id="60242a8e0cdd2c0684a19875"] {
  .summary-thumbnail {
    border: none;
  }
  .summary-item-list {
    pointer-events: none;
  .summary-item {
		padding-left: 20px !important;
		padding-right: 20px !important;
@media screen and (min-width: 640px) {
	padding-left: 100px !important;
	padding-right: 100px !important;
      }
    }
  }
  .summary-item-list img {
    border-radius: 100% !important;
    height: 150px !important;
    width: 150px !important;
  }
  .summary-thumbnail-outer-container {
    height: 150px !important;
    width: 150px !important;
    margin: 0 auto;
  }
  .summary-item-list img {
    border-radius: 100% !important;
    height: 150px !important;
    width: 150px !important;
  }
  .summary-title {
    color: #fff !important;
    margin-top: 30px !important;
    font-size: 1rem !important;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: proxima-nova;
    text-transform: uppercase;
    text-align: center !important;
    pointer-events: none;
  }

  @media screen and (max-width: 640px) {
   .sqs-block-summary-v2
   .summary-block-setting-design-carousel
   .summary-carousel-pager {
     width: 80%!impoprtant;
    }
  }
}

Best,

Tyler

Link to comment
15 hours ago, justaguywhodoesthings said:

Do I apply this at the top of my custom CSS? Also, this issue is persistent on mobile and tablet as well. Thank you for replying so swiftly!

Kindly add it at the end of Custom Css, I also update my previous code with the media query only apply on desktop with the width larger or equal to 1024px

Hope it works as you desire

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, bangank36 said:

Kindly add it at the end of Custom Css, I also update my previous code with the media query only apply on desktop with the width larger or equal to 1024px

Hope it works as you desire

Hi there! Thank you for the proposed solution. After playing around with it, it seems that the issue actually exsits in the code injection of the footer. I don't see anything that could cause this:

<script src="https://ninjakit-assets.ixstudio.net/assets/admin/js/ninja-sqs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.blog-more-link:contains("Read More")').text('View Details'); 
$('.summary-read-more-link:contains("Read More")').text('View Details'); 
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Summary Block Autoplay -->
<script>
window.onload = function() {
  var nextArrow = document.querySelector("#block-yui_3_17_2_1_1612983330424_9026 .summary-carousel-pager-next, #block-yui_3_17_2_1_1642809492834_2980 .summary-carousel-pager-next");
  function clickNext() {
    nextArrow.click();
  }
  setInterval(clickNext, 5000);
};
</script>

 

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.