raego

Thanks – unfortunately this still does not work. You can set it to two columns but they still do not align horizontally both in the editor and on the live site. In my original post, this code fixes the problem on one shop page but not the others. /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 10px; } }

Hi, this still doesn't work sorry.

It is only working on the first page, not on the second two pages, either in the editor or on any mobile device.

Thanks - I tried option 2 which was working, but it didn't work for text links or bolded text which is why I added the *, and it is no longer working either way. I would really like to see if there's a way to target all text on the page as there are a lot of different text blocks and would like it to be universal to any changes made to the page.

I have installed some custom CSS fonts to a site and am trying to get them to work on a single page only. Below is the code I am using, this was working for all text however it has now stopped working and I'm not sure why. Headings are working correctly however paragraph text is not – called Sofia below. The font is installed correctly and is working for other elements such as scrolling text and accordion blocks. <style> @font-face { font-family:Cygnet; src:url(https://static1.squarespace.com/static/60508b4353f74b54f8913bf8/t/6656b97e88db520a0a241d20/1716959614082/CygnetRegular-1Dg4.ttf); } @font-face { font-family:Sofia; src:url(https://static1.squarespace.com/static/60508b4353f74b54f8913bf8/t/6656b999db64d766b69c3338/1716959641857/SofiaProLight.ttf); } h1, h2, h3, h4 * { font-family: 'Cygnet' !important; } p * { font-family: 'Sofia' !important; } </style> Site – https://www.brontegroup.com.au/central-park-working-1

I have used css to display products in a 2 column grid on mobile which is working on my main shop page, but it does not work on my other two shop pages. The code is under global css so cannot understand why it isn't being applied to all pages. I have also tried adding to code injection of those pages which did not work either. /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 10px; } } This page is displaying correct - https://www.raegocreative.com.au/handmade These pages are not - https://www.raegocreative.com.au/crochet-patterns, https://www.raegocreative.com.au/photography-prints

Thanks! I had checked this one out but was hoping for a free solution with no branding and no limit to views etc.

I am currently building a website for a new client - please note the site has not been published yet so this is more of a general enquiry. Does anyone know what the best way to embed TikTok videos to Squarespace is? I have used the general code available on individual videos in a code block however they end up looking like this with all these unnecessary elements. Any help would be appreciated for anyone who has managed to do this in an aesthetically pleasing way.

That would be great if possible - thank you so much! Please note the text under each heading will be an anchor link to different sections on the page (these will change as each stage progresses).

Apologies – I am trying to see if it's possible to have the sidebar on this page be responsive in the sense that every time the browser changes whether that be from a desktop to smaller desktop, or tablet to mobile, the sidebar parameters break and the elements move outside the shape block underneath. Is there any css that would make this group of blocks stay in the same position regardless of browser size? E.g. can the 'px' values be something responsive instead of fixed values? This is what I currently have: body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710823748951_2234 { position: sticky; top: 55px; } body:not(.sqs-edit-mode-active) .fe-block.fe-block-yui_3_17_2_1_1710820931793_13230 { position: sticky; top: 100px; } body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710820931793_31196 { position: sticky; top: 700px; } body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710820931793_29051 { position: sticky; top: 740px; }

I am working on a portal update page for a client and would like to know if there's any easier way to create a simple sidebar using a group of blocks. I have currently created a look I really like and the blocks are sticky, however this is not responsive so when the browser size changes on desktop the blocks are skewed. Is there better CSS I can use to keep the blocks in the same position regardless of browser size? Site - https://brontegroup.com.au/solai-buyers-update-portal

This is great, thanks so much for the info - is there anyway to target this CSS to just one form block? Also if there's any way to do the same CSS for the open form button?

I ended up switching from Image Map Pro to DrawPoint - https://app.drawpoint.io/ Design and styling is a lot more restricted but it works which was the main thing for us!

Hi there! Unfortunately I had to abandon Image Map Pro as they confirmed their current version isn't compatible with Squarespace. I am using Drawpoint as an alternative - not has much functionality in terms of styling etc but it works and is super easy to setup and embed with iFrame. https://www.drawpoint.io/

Hoping to get the code to center align the text in this code block in my footer on mobile only? <p style="text-align:right;font-size:11px" padding=0px> Copyright &copy; <script>document.write(new Date().getFullYear())</script> Raego Creative. </a><br> All rights reserved. ABN 43 719 418 221 </p> Site - https://raegocreative.com.au/