ThisJustin

Site URL: https://www.ktrestaurants.com/ Hello, I create most of my sites with Brine and rely heavily on the feature of setting certain Index pages to the full viewport height (100vh) especially the first page hero. I also like to use the scroll-indicator feature which sits at the bottom of the page. With Safari 15 on iOS there is now a bottom tab/location bar that covers a portion of this "full-height" section. When you scroll down the tab bar goes away, but on initial page load it is blocking the scroll indicator as well as part of the background image. Basically this breaks setting height to 100vh. Has anyone determined a way to ensure that this content is reliably placed above this bar and not obscured? Does anyone know if Squarespace is working on any kind of fix for this feature on iOS? I've haven't had any luck so far.

It seems like there's just a sliver of another background colour coming through on that section. You can try this: section[data-section-id="618be5a6834cb76419127e86"]{ /* Other Styles */ background-color: #17242c!important; } But you shouldn't have to add a border to use border-radius. If you were getting some weird behaviour you could read a bit more about it here.

Hi! You can add this to your custom css: .acuity-embed-button:hover{ background-color:red!important; } Just replace red with whatever color you'd like.

Great! Glad to hear it. 🙂

You can make a trial site password protected and share the url and password here.

The best way to do this would be in developer mode so that you can actually edit the template. Here is a hacky way to do it with jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('.entry').each(function(){ date = $(this).find(".date-wrapper").html(); category = $(this).find(".blog-categories").html(); $(this).find(".date-highlight").html(category); $(this).find(".blog-categories").html(date); }); }); </script> You would also need to update the CSS to make it look right.

It should be possible with custom css. Can you provide a URL to the site in question?

Hi Shannon, Which page do you want to hide the navigation on? You'll need to open up developer tools and find the collection id for that page. (It's in the list of body classes and looks like: collection-5d978ee6590a832f3c3fe6d4) Then you could do something like: #collection-id #topNav{ display:none; } If you want to remove the whole sidebar it would be: #collection-id { #headerWrapper{ display:none; } .header-position-fixed-left #pageWrapper{ margin-left:0px; max-width: unset; } } This would all go into your Custom CSS.

Hi can you provide a URL to the site in question?

Hello! Can you provide a URL?

Hi Lindsay, Unfortunately, this won't work as the aspect ratio of the two screen sizes are different. One way to solve this problem would be to upload a photo without any text and then build that text box in Squarespace. This would also be much better for accessibility and SEO. You might still need to adjust the image so that your face isn't cut off though.

Hello, I'm wondering if anyone has had success installing the local development server on a Apple M1 (ARM64) device? I keep running into an error, and I'm not sure what the issue is. Error log is below. Thanks in advance! justineverett@MacBook-Air template % sudo npm install @squarespace/server npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm ERR! code 1 npm ERR! path /Users/justineverett/Alimentaria/template/node_modules/@squarespace/server npm ERR! command failed npm ERR! command sh -c node scripts/execif.js --exists=build npm run bundle && npm run cleanupscript npm ERR! Executing: npm run bundle npm ERR! npm ERR! > @squarespace/server@1.8.2 bundle npm ERR! > node scripts/bundlejre.js --accept --clear -tz -j 8u131 -o build/distributions/runtimes/jre npm ERR! npm ERR! Bundling compatible JRE (This may take a while) npm ERR! /Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/utils/jreurl.js:36 npm ERR! var sortedVersions = versions.sort().reverse(); npm ERR! ^ npm ERR! npm ERR! TypeError: Cannot read property 'sort' of undefined npm ERR! at getVersion (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/utils/jreurl.js:36:33) npm ERR! at module.exports (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/utils/jreurl.js:51:13) npm ERR! at main (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/bundlejre.js:53:13) npm ERR! at Object.<anonymous> (/Users/justineverett/Alimentaria/template/node_modules/@squarespace/server/scripts/bundlejre.js:79:1) npm ERR! at Module._compile (node:internal/modules/cjs/loader:1109:14) npm ERR! at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10) npm ERR! at Module.load (node:internal/modules/cjs/loader:989:32) npm ERR! at Function.Module._load (node:internal/modules/cjs/loader:829:14) npm ERR! at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) npm ERR! at node:internal/main/run_main_module:17:47 npm ERR! Command failed: npm run bundle npm ERR! A complete log of this run can be found in: npm ERR! /Users/justineverett/.npm/_logs/2021-06-29T19_05_01_492Z-debug.log

Hi, I think I found a better solution: .ProductItem-gallery-slides-item-image { object-fit:contain!important; } It's insane to me that Squarespace doesn't just have an "Original Aspect Ratio" option for product details pages. Kind of a dealbreaker for photographers.