![]() ![]() This is a must for high-visiting sites or sites that want high quality in general. The safest way to guarantee your site from not breaking is to use a plugin that updates the CSS codes for you. Use a plugin with auto-updating code, like Spark Plugin. This does not protect you from the future, but you have come a long way. The longer the CSS snippets are, the higher risk it has of breaking. No, you can still use it if you consider these tips: So should you stop customizing your website with Squarespace custom CSS and code snippets? Minimize the risk of site breaking due to code snippets On top of this, they treat functionality like hover- and touch very differently, which can lead to several issues. Desktops and mobile use different screen sizes. While it might seem that the CSS code snippet works perfectly in your browser, it might have problems in other browsers.ĬSS code not tested in mobile. This can lead to a conflict between the two.ĬSS code not tested in all browsers. When Squarespace updates its services, your CSS code will stay the same. If you don’t use Chrome, you’ll need to inspect the code to locate those ID numbers.FAQ - Squarespace Code Snippets Can code snippets break my website? You can use the same plug-in to find that too. If you want to target 1 specific spacer block, then use the block ID. In the meantime, you can use this nifty Chrome plug-in to locate the section ID # in Squarespace 7.1. That is a bit too involved for this tutorial, but stay tuned, I’ll release a post on targeting sections in a future blog post. If you want to target spacer blocks in just one section, you’ll need to add the section ID to the beginning of this. ![]() On 7.1, navigate to Design > Custom CSS and add the following code to unhide all of the spacer blocks on the mobile version of your site. This way you can actually choose exactly which spacers you want to keep. If you are on Squarespace 7.1, you’ll need to use a little bit of custom CSS to keep the spacer blocks visible. If you wish to maintain that spacing on mobile, then what you’ll want to do on your 7.0 site is delete the 4 spacers that you used to set up your column layout and add just one spacer block above the column layout which spans the width of your page. Well, if you created a 4 column layout and didn’t delete the 4 spacers above each column, they will be adding extra space above your columns on desktop and tablet, but when you view your site on mobile, that spacing will disappear. On tablet view, the columns and spacers will remain intact and get smaller.Īny spacers you have placed next to each other horizontally on your site will be hidden on mobile. It’s important to know that some spacer blocks are hidden when your Squarespace 7.0 or 7.1 website is viewed on mobile. Before you make any mobile-specific changes to your site, you’ll want to get that sorted out first. If you’ve set it up another way, you may see your content appear in the incorrect order on mobile. If you’ve set up your column layout as described above, then the content within each column will stay together. Squarespace automatically makes adjustments to the layout of your website when it’s viewed in a smaller browser window like on tablets or phones. Trick #4: How Spacer Blocks Appear on Mobile So, 2, 3, 4, 6, or of course 12 equal-width columns are possible, though those 12 columns would be pretty dang skinny. What does this mean? Well, it means that in order to have equal columns, the number of columns must be divisible by 12. Squarespace is based on a 12-column grid system. You can use spacer blocks to create custom grid layouts in Squarespace. Trick #3: Create Custom Column Layouts with the Spacer BlockĪdding white space to your Squarespace website with spacer blocks is important for creating that professional look you want, but spacer blocks are capable of so much more. Scroll down to the section named “Index: Page” and adjust the pixel slider for “Padding (Overlay Pages)” in order to achieve the space you need. How to Optimize your Squarespace Website for Mobile Jessica Haines Design Website Designer & Squarespace Expert Learn how to get found in search results to attract more clients & grow your audience How awesome are cookies They make life better, provide a great experience for you and help my website run effectively. Navigate to Design > Site Styles, and click on your banner image. If you are working in a Squarespace 7.0 template that doesn’t allow spacer blocks on top of banner images. The first one doesn’t use any spacer blocks, and the second uses a few spacers above and below the content.
0 Comments
Leave a Reply. |