stressbunny

If you cannot get the SKU to show up via the settings then you could use JS to move it around if it appears on the page. You can achieve this if you: Have JS ability in your Squarespace package Can redo the titles to read something like "sku#title, e.g. SKUL22456#Vance & Hines Competitions Series...." (you need the # to be some kind of "marker" that tells JS where the SKU ends & the product name begins, so it needs to be something that would never actually appear in a SKU or a product title. Hash is therefore usually a good option)

Change the font-family rule to: font-family: "century-gothic"; This is how the font is named on your site, not "Century Gothic".

It definitely works for me, so I'm not sure why it's not working for you. What device are you testing it on? For the logo, more custom CSS that you should place at the bottom of your current CSS. Of if you have an existing media rule set for 767px, add these 2 additional rules to it: @media (max-width: 767px) { h1.logo a { padding: 0px; } #logo .logo { margin-top: -.3em; text-align: center; } }

Have you asked the template creator? They might have had this question before. You can also give this custom CSS a try. It essentially moves the sidebar up a bit. See what you think of that. #canvas { padding: 20px; } body.sidebar-position-left #headerWrapper { top: 20px; left: 30px; } I like your work btw 😃

Okay. It looks like you have some CSS that sets the height of the 3 icons, which is: #block-c0976187c4866e4a353f { height: 250px; width: 350px; margin: auto; } When you're on a mobile that has width of less than 350px the icons are bigger than the screen. They are also off centre at multiple break points, e.g. 900px. Instead of fixing the width, I suggest allowing the width to auto-size & adding a max-width so they don't get too big. So the custom CSS would be: #block-c0976187c4866e4a353f, #block-512d56e19c86b1e3eb0c, #block-9e3eeb8fd2a624874a2f { width: aut

Because of how the theme is built any code for this would also change the same element on other pages, e.g. the blue bar on the BLM page. So it can't specifically be changed by itself.

Custom CSS: section.products.collection-content-wrapper.products-list ul.nested-category-children { display: none; }

Any CSS for this would impact the same element on other pages, e.g. the BLM page. Have you tried making the element height smaller on the editor screen?

I see everything centre aligned. Can you share a screenshot of where the problem is?

The address & sibling venue text will always move together because they are in a row together. The images are in a separate row, also together. You want to tweak the layout so that the logo & address are in one column, the middle space is another column & the the loft/sibling texts are a third column. Then they will stack in the order you desire on mobile as the right column will float in under the left column.

Issue 1: CSS Solution #mobile-navigation input[type="checkbox"] + label + ul li { display: none; } #mobile-navigation input[type="checkbox"]:checked + label + ul li { display: block; } For issue 2 I'd need to see your page.

Can you share the link so we can see the text on the page?

Your split nav doesn't work below 988px. That's when the nav moves to 2 lines. You're seeing this on your iPad due to its screen dimensions, but remember that it will appear like this for anybody on a smaller laptop screen or with a smaller browser window. Hamburger doesn't kick in until 800px or less. I suggest amending your custom CSS to lay the navigation out to work perfectly at 800px. Then test it see how it grows to fit a bigger screen, rather than the other way around. Otherwise, you'll want to change the media queries to have your hamburger kick in at 988px, which feels a little l

I believe this is because you are using static images which are very large, instead of content blocks. When the site resizes on mobile, an image is "zoomed" to fill the space available for it on the screen. This is why all your images look weird on mobile. In general, images that hold text are not ideal. Responsive features are excellent for cross-device browsing, but you can never completely control how an image will show on a particular screen size, so you can never guarantee that headline text will be shown or that a certain image will be in the middle, etc. I would recommend bu

You can change the style of the newTitle using the inline CSS. Keep the rest of the code the same, just edit or replace the line"var = newTitle" with one of the options below. For bold & a named colour: replace "green" with your chosen named colour in this line: var newTitle = clientName + '</br><span style="font-size: 0.8rem; color: green; font-style:bold;">' + clientDesc + '</span>'; OR For bold & a HEX colour: replace "#365194" with your chosen HEX in this line: var newTitle = clientName + '</br><span style="font-size: 0.8rem; color: #