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


  • Posts

  • Joined

  • Last visited

Community Answers

  1. iamdavehart's post in Never solved completely picture orientation problem. was marked as the answer   
    squarespace have an interesting way of laying out image thumbnails. It's to do with how they make the grids layout evenly and respect focus points on the image etc. for each grid item the image gets put in a zero height container which is then padded out by percentage to make sure that the image covers it. this percentage is really the ratio of the image. so in your (landscape) case that padding will be set to 66% (2/3). What you need to do is locate the pictures that you want and change that padding to 150% (3/2). 
    How you select those is an interesting problem. It seems like you've laid them out in a particular way to try to get the vertical ones together, in which case you can use an nth-child selector to choose all the grid items after 27 (9 rows of 3 that are landscape).
    e.g. this uses the section id from your website by the way. you could just add this to your custom css to see it work straight away
    section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item:nth-child(1n + 28) .grid-image-wrapper { padding-bottom:150%; } however, this is probably not an ideal solution as you'd need to change the rule if you ever added any portrait pictures before etc. Unfortunately squarespace put the ratio of the image on the img element and it's very hard to then change the parent based on an attribute of the child using only css. squarespace does however add classnames when you tag products so one solution might be to add a tag "portrait" to your portrait orientation products, you could then alter your rule to target those tagged portrait like this
    section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item.tag-portrait .grid-image-wrapper { padding-bottom:150%; } you'd still have to remember to tag them as portrait though. I think this is a pretty good outcome
    If you really wanted it to "just work", then you'd have to add some javascript (premium feature) to go through the grid and workout whether they were portrait or not and apply the padding style (or a classname that referenced the padding style).
    e.g. if you were to add this to a code block on the page this would set up a class called portrait-fix that sorted out the padding, then loop through all the images and check their dimensions, applying the fix if it found a portrait one. 
    <style> .portrait-fix { padding-bottom: 150% !important; } </style> <script> Array.from(document.querySelectorAll(".grid-item img")) .forEach(i => { const d=i.getAttribute("data-image-dimensions").split("x").map(d=>parseInt(d)); if (d[0]<d[1]) { i.parentElement.classList.add("portrait-fix"); } }); </script> you'd get a slightly odd look if you had one portrait one in a row with some landscape ones, but you haven't specified what you'd want to do there, so that might require a little more thought.
    I think the second option, of manually tagging them with their orientation is the best route personally.
    Hope it works! Guess I should have told you to hire me rather than just writing the answer out.... 🙂 
    Your pictures are lit, mate!
  2. iamdavehart's post in Never solved completely picture orientation problem. was marked as the answer   
    just adding here that if you went down the tagging route, Squarespace adds the tag into the main article element on the product page, so you could add another rule that would do the fix on the main product page
    article.tag-portrait .ProductItem-gallery-slides::before { padding-bottom:150%; } so add this rule and the rule from the second option to your custom css, then all you would need to do is tag the portrait orientation ones with "portrait" and it should fix it in both places.
  3. iamdavehart's post in How to have gallery on home page as main section and also have it cover the header section? was marked as the answer   
    Not sure what your other css is doing, but I think if you just need a carousel style slide show to be top then you just alter the top padding of the first section. see this other post I answered. (am assuming you're 7.1?)
  4. iamdavehart's post in Code for mobile - reduce text size was marked as the answer   
    put your desired css inside a media query that only kicks in up to 768px (iPad width - this is the size squarespace kick their mobile styles in).
    e.g. something like this. 
    @media screen and (max-width: 768px) { #introduction {.image-title p { font-size: 25px !important;} } } add this in addition to your existing rules of course.
  5. iamdavehart's post in Event Summary Show Read More Link was marked as the answer   
    because you need to create new elements, do it with javascript (requires business/premium)
    add a code block on the page with your event summary and write a script in it (you could also inject a script into the header using the pages Settings > Advanced, but it would be in the head so you have to wait for the page to be rendered) locate the event summary blocks you want using a selector by class name (find the classes by inspecting the source). loop over them. retrieve the link to the event from the summary title create a link element, set the href to the link you just got, insert it into the DOM wherever you want it no business/premium? add it manually, or use CSS to add in an ::after pseudo element to write the words "Read More" in, then find an existing link (e.g. the title) add in a pseudo element to that too and then stretch it over the entire summary item using absolute positioning (in the same way that bootstrap does a stretch link for example)
    Should be enough to get you started.
  6. iamdavehart's post in Automatically open default email client from button on 7.1 was marked as the answer   
    the mailto link protocol accepts subject, cc, bcc and body parameters. in addition according to the mailto protocol specification you don't have to provide an address. it works without one, so you can just add a link in the button that has a link like this (%20 is an encoded space, you have "percent encode" your values. you can use an online encoder for that if you want).
    mailto:?subject=Hello&body=Hello%20World! if you do it via the link editor in squarespace it doesn't seem to like it without an email (as you've found out), so I'd just type it in manually. Does seem to cause some odd behaviour with the editor though, sqs probably require one so it breaks some of their validation. it does work though!
  7. iamdavehart's post in Full Screen Auto Advance More than 10 Seconds? was marked as the answer   
    Squarespace stores the settings in a data-props attribute, and it seems that if you can get to that and update it then the timer for the slideshow does appear to honour it. It's possible that there's a race-condition going on here, but I've tested it and it worked on my 7.1.
    You'd need business/premium to do it because we're changing an attribute with javascript. put this in the page header code injection (Advanced in the pages Settings):
    <script> document.addEventListener("DOMContentLoaded",function () { const slide = document.querySelector(".gallery-fullscreen-slideshow"); const att = slide.getAttribute("data-props"); const attJSON = JSON.parse(att); attJSON["slideDurationMs"]=20000; slide.setAttribute("data-props",JSON.stringify(attJSON)); }); </script> waits for the document to load all its content finds the first fullscreen gallery slideshow in the page gets its data-props attribute and changes the sub-property of slide duration (in milliseconds, so 20seconds = 20000) update the attribute Give it a try!
  8. iamdavehart's post in CSS for Highlighting Text was marked as the answer   
    you could do it in a code block. add a code block and use the following HTML / Style
    <div style="background-color:#CB4342; color:white; font-weight:bold; padding:0.5rem 1.5rem; border-radius:4px; display:inline-block; font-size:large;"> STEP 1 </div> if you're going to use this in more than one place, then add the style bit as a class to the Custom CSS in your site (go to Design from the main menu of the editor) like this
    .redLabel { background-color:#CB4342; color:white; font-weight:bold; padding:0.5rem 1.5rem; border-radius:4px; display:inline-block; font-size:large; } and then in your code blocks use this class like this
    <div class="redLabel">Step 1</div>  
  9. iamdavehart's post in Navigation button move to the left was marked as the answer   
    the answer will depend on how far left! I think what you're referring to is that the left of the lines within the burger menu is further in than the right of the cart. this is because the burger menu button has its own padding on the left and right of 6px. you can remove this by adding some css to your site.
    go to the main Design menu and click custom css. add the following code to your custom css
    button.header-burger-btn.burger { padding-left: 0; } this will remove the buttons internal padding and should make it more symmetrical with the cart logo.
    if you want to move it further than that you'll need to alter different classes that affect the padding of the whole menu bar. but I think this is beyond the change you're trying to make.
  10. iamdavehart's post in How do I remove the project section padding? was marked as the answer   
    the portfolio / project grid has its own padding. so you'd need to remove that by setting it to 0. 
    .tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay { padding-top: 0 !important; } add this to your page, either within the sites custom css or inside a code block (you would need to put the code above between <style></style> tags if you do that)
  • Create New...