Jump to content

NoahSnowdayDesign

Squarespace Experts
  • Posts

    19
  • Joined

  • Last visited

Everything posted by NoahSnowdayDesign

  1. Hi @leylishko, You're welcome! If the words are just meant to be read and not links, I think the easiest solution would be to use a graphic design software like Adobe Illustrator, Canva, Affinity Designer, etc. to create the perfect layout with the silhouette > export to png > upload to squarespace. The words will obviously not be text on the screen (they'll be part of the png), but they'll be guaranteed to have the right formatting no matter the screen size because they're locked into the image. Alternatively, if you'd like to use text blocks: I think you could create a similar layout that's relatively responsive by using text blocks and manipulating their positions in relation to the photo by using SquareKicker which is a fantastic tool (by @Nick_SquareKicker), examples below: Desktop (using SK): Mobile (using SK):
  2. Hi @nowal! Can you provide a screenshot of the error message you receive when attempting to upload images? Also, what types of images are you trying to upload? Squarespace does not support several image formats. Let me know and I'll try to help you out! Noah
  3. Hi @leylishko! Your design looks amazing with the correct spacing. Very creative and fun idea. Questions for you: are the words meant to be links or just readable words? Also, how important is it to you that the words are spaced very tightly to the photo? If you're okay with them being a little further away from the photo, you could set the text blocks to be right aligned, remove horizontal spacing in the section, and align the text blocks with the edge of the image block, then use spaces and/or block positioning to achieve a similar but less exact look. If they're meant to be just readable words, I may have a more simple solution for you. If they're meant to be individual links and/or must be their own text blocks, accomplishing the exact above desired outcome for all screen sizes (or even most) would be cumbersome and finicky/require a lot of coding and tweaking.
  4. Hey RickH, Did you ever figure out a solution for this? Dealing with a similar situation now.
  5. @AFZ Awesome! All credit to @inside_the_square, she is a hero!
  6. This video by @inside_the_square should be helpful!
  7. Hi @billfalls! Unfortunately, as far as I know this isn't possible with Squarespace out of the box due to the way SQSP hosts photos (CDN). One solution to avoid the "right click, save image, etc." process would be to upload the images to a service like Google Drive, copy the link from Google Drive and attach it to a button or text (set to open in a new tab). This would allow your visitors to download the images by clicking a button or link on your site, then clicking a download button on the subsequent image hosting site.
  8. It's been awhile, but for those still coming across this post, another solution is to duplicate the page, set the duplicate page to private (or "disabled") and make edits and changes. When the updates are finished, switch out the updated page for the old version. As an example, if you needed to make updates to the "Services" page while keeping it live, duplicate it, set the new page url to "Services-New", and make sure it's set to disabled. Once the edits are complete, go to the page settings for the live, old version and change the url to "Services-Old" while disabling it. Then quickly change the "Services-New" updated page url to "Services" and make it public by enabling it in page settings. Far less complicated than it seems and a very easy solution to this problem.
  9. Hi ClaireHops, This is Noah from Snowday, nice to meet you! This isn't a Squarespace or code based solution but something that I do a lot when faced with the problem you're facing: have you thought about using a graphic design software to add the icon to the photo exactly how it should be, exporting as a .png, then uploading that new .png where the current photo of the computer is, and deleting the separately uploaded icon altogether? This solution is pretty simple, doesn't require any extra code, and ensures that the icon is exactly where you want it no matter the screen size (because it can't move!). I know it may not be the exact solution you were looking for, but I thought I'd share because this is a strategy that I use for graphics all the time. Let me know if this helps!
  10. You're very welcome! @tuanphan did most of the heavy lifting. Here is updated code to make the font weight of the subtitle text 300. Just add the green line to the current code in the CSS editor (font-weight: 300;) /* Add subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; font-weight: 300; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01"; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 01"; }
  11. Got it! I think Tuanphan's solution is perfect for you! He has helped me with many problems and issues in the past and is a tremendous resource to this community. For his solution, instead of adding the code to the Portfolio Settings > Advanced (Page Header Code Injection), you'll want to add the code to the site CSS area which can be found here: Website > Website Tools (toward the bottom of the website editor side menu) > Custom CSS. To make sure the code works for you, take each project URL and add it to the code by replacing the placeholder URLs in the code. So in the code below, replace blue with your URLs, replace green with your desired subtitles. If you have more than 2, just copy and paste the last 3 lines of code until you have enough to cover all of your projects. To adjust the color and size of the subtitle text, adjust the lines in red below. Font size will be in pixels and you can mess with this until you find the right fit. Color can be basic like "black", or "red", or for a more custom color you can use a hex code like #FFFFFF (which is white). Let me know if you need further assistance! /* Add subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01"; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 01"; }
  12. Hi! I hope this answer isn't too late. I totally understand your reasoning for wanting to avoid the redirect notice. I think the best way this problem could be solved is by embedding the Jotform on a page of your site. Let me know if you'd like further information or assistance, we have a lot of experience with both Squarespace and Jotform.
  13. Hello! Are you able to share a link to the site? I think it could be something as simple as adding a text block and selecting Paragraph 1 for the size (unless you're using the portfolio or blog feature to display this information). I'd be happy to take a look at your site though to make sure I understand exactly what you're asking!
  14. As far as I know, Squarekicker now works for both 7.0 and 7.1.
  15. +1 for adding a feature that allows products in commerce to be purchased outright or via a deposit followed by a scheduled payment plan that is not cancellable.
×
×
  • 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.