AJZ

@mlustig Did you paste the style tags (<style>) in the Custom CSS portion as well?
If so, that is your issue. Using SquareSpace's custom css block, it will only take actual css, so you have to leave the html style tags out of it.

This is probably easy for some of you, but it took me awhile so I decided to share in case it might help someone else...
I struggled for a couple days with the calendar portion of Squarespace - mobile formatting was the main issue, but there were other considerations as well. In searching for best overall option, I decided to see if I could use Google Calendar within a Squarespace website. It took awhile to figure some of the details out; but the things I learned are all easy to implement. 
 
1. Embedding the calendar is simple enough; here's a tutorial: https://www.askquesty.com/post/how-to-embed-google-calendar-squarespace-tutorial. 
 
2a. Once embedded, the next step is to wrap the code within the codeblock. Something like this works:
<div class="googleCalendar">
ENTER EMBED CODE FOR CALENDAR HERE
</div>
 
2b. Also, in the codeblock, change the width in the embedded code from width="800" to width="100%"
 
3. After the code is wrapped, head over to CSS and add something like this: 
 
<style>
  .calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
  }
  .calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
 
 
 
That's it. Now you have an embedded google calendar that adjusts based on the screen size and the height doesn't collapse. 
It isn't perfect, but it's free, easy to use, incredibly feature-rich, and likely will be around for awhile.
Hopefully this helps someone. 
Cheers
 
PS. If anyone decides to make it more aesthetically pleasing or comes up with improvements to the code, please let me know

It can be done with simple javascript:
Add this line in Code Injection > Footer

<script>
window.onload = function () {
    document.querySelectorAll("#site-title").forEach((el) => {
      el.setAttribute("href", "https://www.dream.industries/garden");
    });
};
</script>

Hi. Paste below code into Code injection area. 
Setting > Advanced > Code injection > header
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>$(document).ready(function () { $("#site-title").attr("href", "https://www.mysamplesite.com/home"); }); </script>

Wow, I'm continually impressed with this Forum and the people who keep it running. 
Yes, I found a web wrapper which was relatively simple and did a decent job (https://www.webtonative.com/)
I may need to do something like this again in the future. I'll check out Progressier.
Thank you always!

@tuanphan Could we please see a version of this to where a simple hyperlink/text could be clicked for copy? We would like to have specific anchor link URLs that could be more easily sharable. Like this:

Click To Copy/Share This Section
P.S. We're using SquareKicker for the anchor link generation. 

Hello there, did you make any headway with converting your website into an app with Squarespace?

Have you looked at the Squarespace extension called Progressier? It is supposed to turn a Squarespace site into a Progressive Web App (PWA) — making it installable on mobile devices.

Hi Tennet, 
I know I'm very late to the conversation on this, but I had a similar question and found one possible workaround to the limits. Squarewebsites.org has a couple plugins which may help. Here are the links and the relevant wording on their site.
 
https://www.squarewebsites.org/squarespace-plugins/universal-filter
https://www.squarewebsites.org/squarespace-plugins/lazy-summaries
"
Filter Result Limit
Universal Filter does NOT handle additional items loading, which means the maximum number of items you can load depends on the Block type your using (usually 20 or 30 items).
Exception: is if you use Blog List pages - the filter will try to filter/load all posts once you apply Universal Filter on a Blog List page. 
The Solution: 
So if you want to load more than 30 items, you’ll have to use Universal Filter on Summary Blocks  and add the Lazy Summaries plugin  (this plugin raises Summary Block Limit from 30 to unlimited). 
If you wanna know more about collection and page limits, you can read about it here: Squarespace limits.
"
 
I can think of several instances where exceeding the limits would be extremely useful (that's why I found this post). That said, it's probably important to keep in mind that the limits are there for a reason. By stretching them, you risk the website running more slowly. 
 
Anyway, if anyone ever reads this, hope it helps. Cheers. 

These are great plugins from Squarewebsites. However, if you want to increase the limit within a Portfolio Page on Squarespace 7.1, as the original poster asked, they cannot help with this. You can only have 60 sub-pages within a Portfolio collection.

Wow, I feel like I've just been visited by a celebrity! Thank you so much, love your videos! You've helped me a fair amount over the last few years!
 
Just went through every other variable I could imagine and found the glitch. The Vimeo video helped.
 
(My CSS formatting for the calendar was not specific enough.) 

Hey @AJZ I just took a look at your source code and there is some typo/character issue that is blocking your code from rendering after line 35721.

Your code is just fine for 7.1, so something must have carried over from wherever you store your codes. 😬
https://vimeo.com/865155812/e356e70256?share=copy
If  you remove your code & notes, and replace it with this you should be good to go. 

P.S. be sure to add !important for your burger display value change to make sure it's not ignored by the browser. Hope this helps!
 
/* burger on desktop */ .header .header-burger{display:flex!important} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}  

That sounds frustrating!
Can you share some specific details? Website URL, code, somewhere it is working?

Abb this code Design > Custom CSS
#collection-624cd66202f62e6c706a6d67 { .header-nav, .burger-box { display: none !important; } }  

This is probably easy for some of you, but it took me awhile so I decided to share in case it might help someone else...
I struggled for a couple days with the calendar portion of Squarespace - mobile formatting was the main issue, but there were other considerations as well. In searching for best overall option, I decided to see if I could use Google Calendar within a Squarespace website. It took awhile to figure some of the details out; but the things I learned are all easy to implement. 
 
1. Embedding the calendar is simple enough; here's a tutorial: https://www.askquesty.com/post/how-to-embed-google-calendar-squarespace-tutorial. 
 
2a. Once embedded, the next step is to wrap the code within the codeblock. Something like this works:
<div class="googleCalendar">
ENTER EMBED CODE FOR CALENDAR HERE
</div>
 
2b. Also, in the codeblock, change the width in the embedded code from width="800" to width="100%"
 
3. After the code is wrapped, head over to CSS and add something like this: 
 
<style>
  .calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
  }
  .calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
 
 
 
That's it. Now you have an embedded google calendar that adjusts based on the screen size and the height doesn't collapse. 
It isn't perfect, but it's free, easy to use, incredibly feature-rich, and likely will be around for awhile.
Hopefully this helps someone. 
Cheers
 
PS. If anyone decides to make it more aesthetically pleasing or comes up with improvements to the code, please let me know

This is probably easy for some of you, but it took me awhile so I decided to share in case it might help someone else...
I struggled for a couple days with the calendar portion of Squarespace - mobile formatting was the main issue, but there were other considerations as well. In searching for best overall option, I decided to see if I could use Google Calendar within a Squarespace website. It took awhile to figure some of the details out; but the things I learned are all easy to implement. 
 
1. Embedding the calendar is simple enough; here's a tutorial: https://www.askquesty.com/post/how-to-embed-google-calendar-squarespace-tutorial. 
 
2a. Once embedded, the next step is to wrap the code within the codeblock. Something like this works:
<div class="googleCalendar">
ENTER EMBED CODE FOR CALENDAR HERE
</div>
 
2b. Also, in the codeblock, change the width in the embedded code from width="800" to width="100%"
 
3. After the code is wrapped, head over to CSS and add something like this: 
 
<style>
  .calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
  }
  .calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
 
 
 
That's it. Now you have an embedded google calendar that adjusts based on the screen size and the height doesn't collapse. 
It isn't perfect, but it's free, easy to use, incredibly feature-rich, and likely will be around for awhile.
Hopefully this helps someone. 
Cheers
 
PS. If anyone decides to make it more aesthetically pleasing or comes up with improvements to the code, please let me know

Hi,
Can you share link to page where you use calendar? We can check easier

I don't have any solutions but some observations.
Note for other helpers, it is not a strike through. It is a CSS background-image property, part of the Flex animation. It appears the issue is related to the beloved-sans font having a large descender height causing the background-image to overlap when things get tight.


Here is the descender when I force the font-family to sans-serif,

This is how it looks when cramped.

A solution to this issue might be to not use the beloved-sans for the calendar or not use the font.
I'm not a font expert so I don't know if my terminology is right.

Add to Design > Custom CSS
/* Accordion Hyperlink Underlines */ div.accordion-block a { border-bottom: 1px solid; }  

Try this new code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-title a').attr('href','https://beaverhero.com'); }); </script>  

Thank you. I just tweaked your code to work on my site, 7.1
Here is code
/* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } }  

@AJZ Add to Design > Custom CSS
/* Portfolio */ #gridThumbs a.grid-item { background-color: #fff; border-radius: 20px; box-shadow: 0px 3px 12px rgba(0,0,0,.1); padding: 30px; transition: all .2s linear; }  

What is the site password

@Tomz it appears that you have added the code to the site's Header Injection instead of the homepage's Header Injection area.
To clarify, the code should not be added to Settings > Advanced > Code Injection > Header.
Instead, go to the Pages panel, and then find the site's homepage (not homepagem). Click the Settings [gear] icon beside the homepage name. When the Page Settings panel loads, click Advanced and you'll see a code injection area specific to this page.
   If a post helps you, please click a "Like" option below  ↘️

Hi
Yes, there's a workaround you can add for this. The code below assumes that the mobile version of your home page has the URL 'mobile'. Add the following code to the Code Injection area of the desktop Home page (you'll find this on the page settings on the Advanced tab):
<script> if (screen.width<760) {window.location="/mobile";} </script>
Paul

UPDATEI've updated this answer to allow for devices with higher resolutions and to allow testing on browsers when the width has been reduced.

Use the code below instead, adjusting the URL and the width (in pixels) to match your needs:

<script> if (document.documentElement.clientWidth <760) { window.location = "/mobile"; } </script>