Wolfsilon

Hello Megan,
This happens at a certain width, or size of the screen because the layout shifts into a single column and orders everything vertically. Partly because shrinking the entire website to fit to size just isn't a standard function although, there are clearly certain circumstances where this would be the desired effect. In this case, I would encourage you to consider a couple of things. The text displayed for the icons via the image changer will no longer be legible and you will need to adjust the dimensions of the image between the top icon and the bottom two icons. To do this, try using the following code.
The code:
#collection-60abe9a635cf7e0257669806 { @media only screen and (max-width: 640px){ .sqs-row { display: flex; width: auto !important; } #block-yui_3_17_2_1_1623419223240_90583 { width: 90vw !important; } } } Hope this helps!
-Dan 
 

Hello,
Try this code and tweak some of the settings to your liking. Border radius is your rounded corners, Color is your text color, and by changing the Display to Inline-Block we're able to adjust the width of the box. Without using an absolute measurement like (px), we'll end up with different sized boxes.
section[data-section-id="60ca314ce05af83b627d8fc9"]{ .portfolio-hover-item-content { display: inline-block !important; width: 300px; background: #000; border-radius: 15px; } .portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title { color: #fff !important; font-size: 2.5vmax; } } On mobile devices you might encounter some sizing issues. Testing these fixes are a bit tricky when overriding the default settings but this might help.
@media only screen and (max-width:640px) { .portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title { font-size: 2.5vmax !important; } } Hope this helps!
-Dan

Tnx, it Worked!

Hello,
Try this code below.
section[data-section-id="60cdc17f7d058466d13a964f"] { .sqs-block { padding-bottom: 0px !important; } } -Dan

Its worked!!! Thanks so much for all your help 🙂 

It's a little tricky to test but I think you'd be able to use the code below for each image. Just swap the ID for each of your sections on the page and insert the image url for the corresponding section ID.
section[data-section-id="60c47f0723695f68078a9d17"] { @media only screen and (max-width: 640px) { .gallery-fullscreen-slideshow-item-img img { display: none; } .gallery-fullscreen-slideshow-item-img::before { content: ""; position: absolute; width: 100%; height: 100vh; background-image: url("YOUR_URL_IMAGE_HERE"); background-size: cover; background-position: center, center; background-repeat: no-repeat; z-index: 1; } } } Hope this helps,
-Dan

It's a little tricky to test but I think you'd be able to use the code below for each image. Just swap the ID for each of your sections on the page and insert the image url for the corresponding section ID.
section[data-section-id="60c47f0723695f68078a9d17"] { @media only screen and (max-width: 640px) { .gallery-fullscreen-slideshow-item-img img { display: none; } .gallery-fullscreen-slideshow-item-img::before { content: ""; position: absolute; width: 100%; height: 100vh; background-image: url("YOUR_URL_IMAGE_HERE"); background-size: cover; background-position: center, center; background-repeat: no-repeat; z-index: 1; } } } Hope this helps,
-Dan

Hello,
Try the following code, let me know if this helps.
section[data-section-id="60c763a3f3cec4103bebcf6f"] { @media only screen and (max-width: 640px) { .sqs-row { display: flex; flex-direction: column !important; } .sqs-col-6 { flex-direction: column-reverse; display: flex; } .sqs-col-6:last-child { display: flex; flex-direction: column; } } }  
-Dan

Hello Apollow90,
The bottom of what screen? The bottom of the entire website or the bottom of a specific section or page? If you could share a URL to the page where you want to display the rotating icon, I can give you an accurate code and the CSS to use.
Thanks,
-Dan

Hey there,
Try this code.
.blog-item-wrapper p:last-child { margin-bottom: 2.5em !important } The blog-item-wrapper is the wrapper of all of the blog contents and we've added a "p:last-child", which means that last paragraph of the blog should have a bottom margin of 2.5em. Otherwise, every paragraph in the blog post will have the margin.
Hope this helps,
-Dan

Hello,
You can reduce the width of the blocks on mobile for the circle images and caption by using the code below.
section[data-section-id="601c878e78a1067166d81580"] { @media only screen and (max-width: 640px) { #block-yui_3_17_2_1_1612735498763_6718, #block-yui_3_17_2_1_1612735498763_8361 { width: 50% !important; } } } Taking a look at your website regarding the alignment issues, it appears that you have some CSS limiting the size of the building image to 300px at a previous screen-size media query. By Removing:
section[data-section-id="601c878e78a1067166d81580"] { @media only screen and (max-width: 769px) { .sqs-block-image-figure.intrinsic { max-width: 300px !important; } } } From your Custom CSS. The image will shift to the left and fill the block. The content should be aligned properly now.
Hope this helps!
-Dan

Hello,
This code from CodePen uses several CSS lines for the dimensions that are causing the narrow box. You'll want to set the CSS for the following to achieve a specified height and width. 
#particles-js { position: absolute; width: 100%; height: 50vh; background-color: #b61924; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } In terms of the "minus" symbol. There are several possibilities that could be causing that icon to appear. The first being that while the animation is running, you're still viewing the page in the editor mode. Try refreshing the page and see if the animation and the symbol are still visible. If so, then you'll notice that I removed several lines from the original Particles-JS CSS code that I shared. The first being, a call for "background-image: url("");". You'll want to start there. If this removes the symbol then you're all set.
If the symbol is still appearing after a refresh and removal of the CSS lines. You're likely going to want to recreate the options file for Particles.JS. The Code on CodePen was last updated in 2016 and includes other resources that might be outdated. I've installed this library numerous times and don't recall seeing this symbol either. So try to reconfigure the settings and install the library again. 

Hello,
On certain templates for 7.0, you can add an intro section to the top of the blog page and add any bit of content that you'd like.
On 7.1 -- Go to your blog > edit > "add section".  Add a template section or blank section. You should then be able add text or other content to the top section of your blog page.
 
Hope this helps,
-Dan

Hmm,
There are ways to achieve something similar using only Squarespace tools, but could be limiting in the features they provide like using a QR code and stuff of that nature. You'll need to find a plugin that can be installed to the Lock Page that can handle multiple passwords, randomly generated passwords, and other features you might want.
To setup a webpage where users with the password can enter that differs from a password for the main website. Start by creating a new page, complete with styles, forms, and anything else the user should see or do upon entering the correct password. After you've created that page, open the settings by clicking the gear icon and set a password to the page. You'll then want to navigate to Design -> Lock Page. Select a layout and style this page as desired.
Now that you've selected a Lock Page and created your password protected form page, users should see the Lock Page that you designed earlier and be required to enter the password you set. This is where additional features may be rather difficult to implement. As you can see, there can only be one password and removing that password removes the lock screen feature. You can customize certain aspects of the lock page to either mimic, or replicate this type of setup. A good starting point and article to read would be over on @tuanphan's blog here.
I know this probably isn't exactly what you're looking for, but hopefully this helps a little bit.
-Dan

Hello,
The example you shared and your description sounds like an "auto-scroll" or "scroll-snap" feature. You will need a Squarespace subscription that has Javascript enabled. If you have a plan that supports Code Injection.
Navigate to Settings > Advanced > Code Injection.
Copy and paste the following into the Header Code Injection field:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous"></script> <script> $(document).ready(function() { $.scrollify({ section: ".page-section", sectionName: ".page-section", easing: "jswing", scrollSpeed: 800, overflowScroll: true, setHeights: false, scrollbars: true, touchScroll: false, before: function() { $('.page-section').removeClass('active') current = $.scrollify.current(); current.addClass('active') }, }); }); </script> I would encourage you to explore the "Scrollify" website and experiment with different features, speeds, easings, and options. You'll also be able to understand how to control where and when the auto-scrolling should take place. The setup I've provided a bit advanced, but should get you up and running in no time.
 
Hope this helps,
-Dan

I've definitely experienced issues on 7.0 with grids and summary block thumbnails not sizing properly, usually because of the amount of items or spacing issues. Sometimes it's within the default CSS that conflicts with other areas of the page. The scripts for these blocks are weird sometimes, even if you don't have conflicting Custom CSS.
This might help your problem:
#collection-597767a8a5790a133c13e5de { #grid { margin-top: 55px !important; } } Hope this helps!
-Dan

Hello there,
Taking a look at your website, I can see the font on some elements. Taking a look at the code you provided, I see that there are some errors in your "font-face" calls. Try replacing them with this:
@font-face { font-family: 'Romie-Regular'; src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff'); } @font-face { font-family: 'MonumentExtended-Regular'; src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff'); } Your original code had a "}" before the URL of the font. Hope this helps!
-Dan

Hello,
To achieve this effect with scrolling features, you will indeed need to have a website subscription that supports Javascript. Otherwise, you can not animate on scroll. You may still be able to add a circular image that spins around automatically but it won't be controlled by the user when they scroll on your page.  
-Dan

Hello there,
When you install a custom font, you will also need to tell your website what elements should use the custom font. Typically, you'll be using:
p, h1, h2, h3, a { font-family: "Your_Font_Name"; } These are the most common text elements.
P = Paragraph
h1 = Heading 1..., 
and A = Link
Your header and footer most likely consists of multiple "a" elements and sometimes the code above won't be enough to target all of the elements on your website, so you may need to specifically target the header and footer sections by adding and overriding the default fonts:
.Header a { font-family: "Your_Font_Name" !important; } Footer:
.Footer a { font-family: "Your_Font_Name" !important; } If you'd rather use a global font change you can use:
* { font-family:"Your_Font_Name"; } Hope this helps!
-Dan

Hello,
Using aggregator plugins and feed generators will depend on the content you are planning to share. Are you pulling content from other sources like social media and news articles? Are you looking for feeds generated from other locations on your website?

Thanks Dan!  You're a star.  Very clean code too.  Works great!

Hi Sam. you can use these vector image (png format) as an background image. Add a text and where you add this effect simply make a bold/italic property for it so you can easily target that one word. Upload each image onto squarespace and get the link.

h2 em {
font-style: none !important;
background: url(// aad link here) no-repeat;
background-size: contain or cover // Use any of this
}

and if you want to add these image specific html block then simple grab the ID of the html-block and wrap above text in it, example below

#Block-id {
h2 em {
font-style: none !important;
background: url(// aad link here) no-repeat;
background-size: contain or cover // Use any of this
}
} 

Hello,
Wonderful photos by the way! I've tried to take a look at the code you provided but, rightfully so, you've removed the ability to inspect the elements on your page. I'd be more than happy to write some code for you. However, without being able to test and customize the CSS on your page with developer tools -- I cannot provide an accurate solution for you. If you're uncomfortable opening access to the pages, I would suggest using the inspector tools on your end and looking for and applying padding adjustments to divs like: 
.Header .Header--top or .Header-inner .Header--inner-top 
(depending on the template/version these divs could vary)
Let me know if you're still in need of assistance! Feel free to reply here or message me.
-Dan

Hello!
Squarespace recommends that you do display text, objects, or elements within the image itself. The image will be cropped at different screen sizes. If you have the ability to remove the text from image, you can add the banners and text information back in by using Squarespace text blocks and a little Custom CSS.
That being said, I'd be more than happy to help you color and adjust your banner if you decide to go this route. This will be easier than using code to fix this issue.
 
Hope this helps!
-Dan

Hello there,
To add an animated arrow down element, we'll need to use a Code Block and Custom CSS.
1) Create a Code Block and place the block directly underneath the "Get A Quote" button.
2) In the Code Block menu, you'll see "<p> hello world! </p>" -- Remove the entire line and replace it with the following: 
<div class="arrow"> <span></span> </div> 3) You can now save and close the page editor. Return to "Home" and navigate to Design > Custom CSS.
4) To animate and place the element onto your website you can paste the following into the Custom CSS box:
 .arrow{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%); } .arrow span{     display: block;     width: 30px;     height: 30px;     border-bottom: 3px solid #000;     border-right: 3px solid #000;     transform: rotate(45deg);     margin: -10px;     animation: animate 1.8s ease infinite; } @keyframes animate {     0%{         opacity: 0;         transform: rotate(45deg) translate(-20px,-20px);     }     50%{         opacity: 1;     }     100%{         opacity: 0;         transform: rotate(45deg) translate(20px,20px);     } } 5) You should start to see the arrow animate downward in the center of the page, directly under the "Get A Quote" button. 
You can customize the "stroke" of the arrow by adjusting the dimensions of the Border-Bottom and Border-Right "px" properties.
You can adjust the color of the arrow ("stroke") by inserting a hex/rgb/rgba color of your choice. Simply replace the "#000" with the color/format of your choice for both Border-Bottom and Border-Right.
You can adjust the speed of the downwards animation by entering new timings and transitions. The CSS format of the animation shown above is listed below and I would encourage you to experiment with different properties for transition-duration and timing-function. 
 
Let me know if you need any additional help. Hope this provided a solution for you! 
Cheers,
Dan