Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

stressbunny

Member
  • Content Count

    45
  • Joined

  • Last visited

Everything posted by stressbunny

  1. 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)
  2. Change the font-family rule to: font-family: "century-gothic"; This is how the font is named on your site, not "Century Gothic".
  3. 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; } }
  4. 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 😃
  5. 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
  6. 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.
  7. Custom CSS: section.products.collection-content-wrapper.products-list ul.nested-category-children { display: none; }
  8. 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?
  9. I see everything centre aligned. Can you share a screenshot of where the problem is?
  10. 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.
  11. 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.
  12. Can you share the link so we can see the text on the page?
  13. 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
  14. 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
  15. 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: #
  16. Did you put it in like this again? <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { var title = document.querySelectorAll('h3.portfolio-title'); for (var ss = 0; ss < title.length; ++ss) { var item = title[ss]; var clientName = item.innerText.slice(0, item.innerText.indexOf('#')); var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length); var newTitle = clientName + '</br><span style="font-size: 0
  17. Ah, that's it! It's JavaScript. So it goes in where your original JS script was injected. It's just an updated version of what you originally had.
  18. $(document).ready(function() { var title = document.querySelectorAll('h3.portfolio-title'); for (var ss = 0; ss < title.length; ++ss) { var item = title[ss]; var clientName = item.innerText.slice(0, item.innerText.indexOf('#')); var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length); var newTitle = clientName + '</br><span style="font-size: 0.8rem">' + clientDesc + '</span>'; item.innerHTML = item.innerText.replace(item.innerText, newTitle); } }); I've validated it again but I
  19. If you want to keep the script, the first part sorts the footer issue, the other 2 for image width: @media screen and (max-width: 767px) { #page section:first-child { min-height: unset; height: unset; } .product-block .image-container img { position: relative; display: block; width: 50%; margin: auto; } .ProductItem-gallery { width: 50%; margin: auto; } }
  20. I spotted that but I can't see what's going on! I'll see if I can find what's causing it. Also, add this to the media rule too, for the "minor figures" images, which are slightly different to coffee/merch, but have the same sizing issue: .ProductItem-gallery { width: 50%; margin: auto; }
  21. You can add this to the end of your CSS (or to any existing rule for this width) @media (max-width: 767px) { .product-block .image-container img { position: relative; display: block; width: 50%; margin: auto; } }
  22. What size screen are you using to view your site? If you want to optimise it for whatever size you are looking from, then we could probably tweak it by removing some of the padding on top, etc. But if a customer has a smaller screen they will still see the sidebar cut off. Attached is how it looks on my large desktop monitor, FYI. You can see the sidebar looks great.
  23. Try this. It just has font-size but you can add whatever else to the style. $(document).ready(function() { var title = document.querySelectorAll('h3.portfolio-title'); for (var ss = 0; ss < title.length; ++ss) { var item = title[ss]; var clientName = item.innerText.slice(0, item.innerText.indexOf('#')); var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length); var newTitle = clientName + '</br><span style="font-size: 0.8rem">' + clientDesc + '</span>'; item.inne
  24. What are you trying to achieve? This was an example of how you can target the lines with CSS. You don't say what you want to do with them.
×
×
  • Create New...