Jump to content

Websley

Circle Member
  • Posts

    30
  • Joined

  • Last visited

Everything posted by Websley

  1. Hi Sunnie you can try this code! Just change the color to whatever color or hex code you would like and then the collection id as well to your specific one. You can find your collection ID by using the inspector tool or even easier, just download the Squarespace ID finder chrome extension tool and find the specific one by page. Hope this helps! #collection-66305764abf8b70959ba6b64{ .header-border { background-color: red; } }
  2. Hi everyone! I have been having issues with the summary block recently. I used this code to fix the thumbnail getting cutoff in the summary block but now the padding between the image and text is too big. Does anyone know how to fix this? Thank you! This is the site: https://www.uninvested.org/
  3. I'm impressed it's a great start! I just have a couple little things that should instantly improve your site: 1. Make the navigation menu a bit smaller. Currently it's taking up too much of the hero section. 2. Add a little padding in the book now section 3. Keep the google reviews section the same color as the background. That way it looks like it's a part of the site and not just a block thrown on there. Hope this helps!
  4. Can you share the link to the website?
  5. Is it possible to make the podcast icons smaller on blog pages for mobile? I would really appreciate any help, I've been trying to figure this out for the past couple days. (Both the ones on the top and the bottom of the site) Thank you! This is the site: https://uninvested.squarespace.com/episodes/episode-1-ey3yn password = pass This is the reference site that I want the icons to look like. https://www.lennyspodcast.com/unorthodox-frameworks-for-growing-your-product-career-and-impact-bangaly-kaba-youtube-instagra/
  6. Hey this should work on removing it and replacing it with different text: h2.ProductItem-related-label { visibility: hidden; } h2.ProductItem-related-label:before { content: "Whatever text you want"; visibility: visible; }
  7. Hi I've been struggling to find this anywhere and would love some guidance. Does anyone know if it's possible to create a toggle like this reference site here: https://www.lennyspodcast.com/unorthodox-frameworks-for-growing-your-product-career-and-impact-bangaly-kaba-youtube-instagra/ Any help is appreciated. Thank you!
  8. Sorry for the confusion. I'm talking about this page. The password is pass: https://uninvested.squarespace.com/episodes/episode-1-ey3yn
  9. Hi everyone I have been trying to figure this out for quite a while now so any help would be greatly appreciated! https://uninvested.squarespace.com/?password=pass I'm looking to fix the size of the logos for mobile and would like for it to be consistent on every blog page. Anyone know how to do this? I provided some images of what I'm looking for. If possible I'd have the logos in the red circle and have the rest of the text in the blog to move up
  10. If you head into the header and click on the logo you can actually just adjust the height of the logo for mobile only. It should be labeled "mobile logo max height". If that doesn't work and you need a code solution let me know.
  11. I think the website is simple but is amazing at serving its purpose. Because when I went on it, I was wowed by your work. Great job!
  12. Hey Tim, I think it's a great start and I really love the icons. But just a couple things about the hero section to maybe consider: Introduce some font hierarchy between your header and paragraph fonts. The paragraph saying "A shift to customer-centricity" should be smaller to contrast more from "Innosee" Add a Call-to-action button in your hero section. So whatever you're main goal of the site is, make sure to include that right in that first section. A lot of times, users don't even make it past the first two sections
  13. Yeah this is actually native to Squarespace! You just head into site styles -> accessories -> and then you can adjust the site margin to your liking. Hope this helps!
  14. No worries! Depends what you need. If it's the product description you can input this and put your font family there: .ProductItem-details { font-family: 'enter-font-here'; }
  15. Hi Hayley, this is the code to change the font of a button. If you already have the font uploaded and inputted you can remove the first part. I'm assuming you mean a custom font, because otherwise you would just be able to find this in site styles. @font-face {font-family: 'FONTNAME'; src: url(); } .sqs-block-button-container a{ font-family: 'YourCustomFont' !important; }
  16. Go to website -> pages -> website tools -> and then click custom css From there you can click the down arrow next to custom files and then just upload the file there. @font-face { font-family: 'enter-font-name-here'; src: url(enter-font-url-here); } h1{ font-family: 'enter-font-name-here'; font-size: 35pt; letter-spacing: 3px; line-height: 100%;} To make it simple, you just click on the font you uploaded to get the url in the custom css. I hope this helps. You can play around with font size, spacing, and line-height to get the desired look.
  17. There's probably a different way to go about this but this works for me: Duplicate the section on the desktop view. Input the new background that you would like on the new section. Take the section ids of each and input them in between the brackets. Basically the point of this code is the hide one section on desktop and the other on mobile. Hope this helps! @media only screen and(min-width:768px) {[mobile-data-section-id]{display:none}} @media only screen and (max-width:767px) {[desktop-data-section-id]{display:none}}
  18. Hi Milla I can help you with this: 1. Upload your alternate logo under design -> custom css -> manage files 2. Upload this code and just input the collection id and url of the logo /**mobile logo**/ @media screen and (max-width:767px) { #collection-id-here .header-display-mobile .header-title-logo img { content: url("insert-url-here") !important; max-height:inherit !important; } }
  19. Yeah this would be the code for your desktop logo: @media screen and (min-width: 767px) { #collection-id-here .header-title-logo img { content: url("insert-url-here") !important; max-height:inherit !important; } } Let me know if this helps!
  20. You would just hit edit content -> size and space -> space between items -> hit the three dots and adjust to exactly how you'd like
  21. Hi I actually helped a client with this! You can create a host a circle community and directly embed it onto your website. It does have a cost to it but it would be a great solution for what you're looking for. https://circle.so/
  22. Under your site styles, head into accessories -> spacing -> and then set spacing to 3000px width. You can head into your chrome inspector tool to see how this responds to different screen sizes. Let me know if you need any more help!
  23. Hi you could just hop into font-> site styles -> portfolio grid:simple -> title -> and then you can choose a custom size from there. You can do the same under portfolio:item -> pagination and choose a custom size as well. Hope this helps!
  24. Hi you should be able to accomplish this with two image blocks placed on top of each other to the width of the screen. Just turn off the fill screen option and put the horizontal gap to 0 so that the images are symmetrically even. Hope this helps!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.