Ziggy

Hi @lfang2, I generally wouldn't recommend converting your text to an image, it's not great for readability or for SEO. The "scale to fit" feature for text is great for making small pieces of text fit an area, but doesn't tend to be a great solution for longer strings of text since it gets scaled rather small on mobile. What look were you trying to achieve that a standard H4 font didn't achieve?

You could add this to change the minimum height of the navigation folder and this will bring the button up to underneath the nav items, but also allow you to add more without adjusting in pixels. .header-menu-nav-folder { min-height:5% important; } Hope this helps!

Is there a reason that you've added this to the code injection rather than the Custom CSS? Where did you get the code? I'm also slightly confused as to what you're trying to achieve here, can you provide an example of what you want it to look like? Thanks for elaborating!

Fantastic, glad I could find you a nice easy solution!

Just to clarify; are you trying to move the hamburger menu to the right and under the logo on https://processnpower.squarespace.com?

What do you mean by does work? It does seem to work in my testing, but the problem I can see is that the background colour is white and the navigation link colour is white, you can adjust these settings in the Design Style editor.

I can't see where you've having issues, the embed loads just fine when I test it. Are there any specific circumstances where this is happening?

Hi @MikePintea, easy fix for you! You don't need any custom CSS, just change the section setting from small to large, and if you want the video to appear at the top of the section on mobile change the alignment to top. I would recommend that you check the page (when editing) in mobile mode (mobile toggle in the top right of the screen), to make sure the design is correct there. Hope this helps!

Hi @James_9848, this is what you need: #collection-60b9dadbc8f89f0d0d502b31 { .section-background { background: linear-gradient(145deg, #3366ff, #00ff66); background-attachment:fixed; } } Let me know if this has worked.

You could target subsequent folders in the navigation using nth-child(n), change the colours as needed and add as many as you want. .header-nav-item--folder:nth-child(1) { .header-nav-folder-content { background: #a1bea8; } } .header-nav-item--folder:nth-child(2) { .header-nav-folder-content { background: red; } } .header-nav-item--folder:nth-child(3) { .header-nav-folder-content { background: blue; } } Hope this helps!

It should be possible to add another element to the header. Could you set your website to password protected and share the password here so that the website can be viewed? Thanks! https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

Fantastic, could you mark my reply as the answer, thanks!

Great, glad that answered your question and that it's working!

Since you're using the Fluid Engine editor, you can add an image block and place it behind the text block. Make sure to set the image to fill the block, and change the order to behind the text block.

You should be able to add content there using this Custom CSS .product-price::after { content:'add you text here'; } If you want to change this based on a variable then you'll need some clever javascript (what are the variables?). Or you could target this text to different items, and change them manually per page as needed using the item IDs. Let me know if it works for you.

Hi @Marta, this is a pretty common design challenge for any website with background images. Background images are set to fill a space on your website defined by the foreground content in the section, usually a minimum height and the screen size that the website is being viewed on. With this in mind and the fact that your background image needs to look good as a letterbox ratio of may 3:1 on a very wide screen, as a square (1:1) on tablet screen, and a portrait image (1:3) it is often good to pick an image that will look good when cropped in these ways and every way in between. Not to say this is necessarily easy! Here are two possible solutions depending on how you'd prefer to solve this. 1: Replace the background image for a completely different one on mobile: 2: Prevent the background image from being cropped no matter what the screen size: https://www.will-myers.com/articles/prevent-background-images-from-cropping-in-squarespace-71 This is potentially a good solution, but any content that you have in the section will potentially stop this from working. I hope this helps you towards a solution that works for you.

I've not seen a good solution to do this, you can hide the titles with CSS and add placeholder text, but I don't think that would achieve the look you want, though it can look tidy.

Hi @NP3000, which version of Squarespace are you using? Can you share the your website URL and password if it's not live? What media query size you use will depend very much on what you're trying to do. 750px is an important breakpoint between desktop and mobile for Squarespace 7.1 with the Fluid Engine editor. But with the classic editor 640px is the major transition. Typically it's good to bound with max and min if you're wanting 3 or more different styles for different screen sizes, if you're just adjusting for desktop/mobile than you shouldn't need to use both max and min on the same query.

There are certainly way that you can achieve this, take a look at this thread: I will say that Squarespace websites are bespoke, they're just not coded from the ground up, you can design them to look pretty much how you want and there are loads of great plugins to add where needed.

You have a code block with a custom class, why not just hide it with a media query in the CSS?

At this point in time, I've not seen any fix for the known problem. When the accordion block expands an item it stretches the grid at that point on the page which is always above your second block of text on the left, and that grid stretching opens up the gap. You can see others talk about this here, but no solution: I suggest that you report the problem to Squarespace and hope they fix it. In the meantime I suggest that if you have an accordion block, that you don't have the top of another block lower than the top of the accordion block. So maybe in your design leave space to the right of "Self-healing = Real healing." and align the top of the accordion to the same row as the text block on the left ("While classical Chinese medicine...."). Hope this helps in some way!

This honestly sounds like you want a portfolio page with a form on each portfolio page rather than a shop for people to browse through and just inquire. The store process is designed for making purchasing simple and easy and it's not designed to not go through the purchase process You could add a form to each store item and hide the purchase button with CSS, but that'll make your life difficult when you want to complete a purchase on the website, and the form button will end up below the image, so won't be as obvious to click on. Sorry this doesn't give you the answer you were wanting, but I hope it helps in some other way!

Have you tried this code? It works perfectly when I've used it. https://www.rebeccagracedesigns.com/blog/products-side-by-side-mobile /* 2 Column Product Grid */ @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } You may want to adjust your font sizes once applying this.

It looks like the footer middle is hidden and with a -20px margin. I'm not sure if this has been done in the Style menu or in Custom CSS, but should be fixable. Try looking through the Style menu for all the footer settings or looking for .tweak-footer-layout-columns .Footer-middle { margin: -20px; } in the Custom CSS, and temporarily removing it to see if you can now edit the Middle Footer. Here are some potentially helpful links: Footer navigation links: Display in the site footer. Are styled with Footer: navigation tweaks. https://insidethesquare.co/squarespace-tutorials/split-column-footer-brine

These are the only image blocks I can see, are you trying to change some or all of these on mobile? They seem to look okay on mobile. Noticed looking at your website that you may want to adjust the line height of the navigation to be 1em or greater so that the links don't overlap.