Jump to content

Red_Dot_Design

Circle Member
  • Posts

    36
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Red_Dot_Design got a reaction from Ziggy in Code block for image swap not working on tablet/mobile   
    Ah I did! I've removed the image swap code and that fixed it. You're fab, thanks so much! 
  2. Like
    Red_Dot_Design reacted to Ziggy in Code block for image swap not working on tablet/mobile   
    I'm suspecting you have something on your website that is causing these issues, can you check on my test website if this code works there for you?
    https://quillfish-tangerine-4c2a.squarespace.com/test-layout?password=testing
    PW: testing
  3. Like
    Red_Dot_Design reacted to Ziggy in Code block for image swap not working on tablet/mobile   
    Sure thing, try this:
    HTML for a code block:
    <div class="image-overlay-container"> <a href="/portfolio"> <img class="image" src="https://images.squarespace-cdn.com/content/v1/646f55f280e63d049e7cbdd8/a567a255-0995-4be4-9092-e0a2a5cb930d/Services.png"> <div class="overlay"> <div class="text">Portfolio</div> </div> </a> </div> Custom CSS:
    .image-overlay-container { position: relative; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 600ms ease-in-out; background-color: rgb(141, 123, 119); } .image-overlay-container:hover .overlay { opacity: 0.8; } .text { color: white; font-size: 34px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
  4. Like
    Red_Dot_Design reacted to Ziggy in Code block for image swap not working on tablet/mobile   
    Sorry, I can't really explain that. Given that you're coding this, it may be easier just to have the image and add the overlay and text in code too instead of having it in a second image, should be relatively straightforward.
  5. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Add this too:
    .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper .image-caption { margin-bottom:auto !important; }
  6. Like
    Red_Dot_Design got a reaction from Ziggy in How to achieve custom colour overlay on inline images   
    Thank you! 😊  That helped fixed the colour overlay but the text is still sitting at the bottom instead of in the middle of the box? 
  7. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Hi Tara, it looks like you need an !important after the 80% opacity and add this:
    .image-caption-wrapper { max-height: 100% !important; }
  8. Like
    Red_Dot_Design got a reaction from tuanphan in How to edit Supply template homepage to have full bleed images?   
    Thats amazing thank you Tuanphan. 
  9. Like
    Red_Dot_Design reacted to tuanphan in How to edit Supply template homepage to have full bleed images?   
    Add to Design > Custom CSS
    @media screen and (min-width:901px) { body.homepage .wrapper { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } body.homepage div#siteHeader { padding-top: 65px; } body.homepage { overflow-x: hidden; }}  
  10. Thanks
    Red_Dot_Design reacted to tuanphan in How to edit Supply template homepage to have full bleed images?   
    Hi,
    Can you share link to this page? We can check easier
  11. Like
    Red_Dot_Design got a reaction from Ziggy in How to achieve custom colour overlay on inline images   
    That's done it! Thank you. 
  12. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Yes, replace the previous with this:
    .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption { margin: auto; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper { display: flex; align-content: center; }  
  13. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Not sure why that's happened, but when looking at your website I can only see the default small caption overlay now, did you remove the CSS?
  14. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Did you do anything beyond adding the CSS I gave you?
  15. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Try adding this too:
    .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption { margin-top: auto; margin-bottom: auto; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper { display: flex; align-content: center; }
  16. Like
    Red_Dot_Design got a reaction from Ziggy in How to achieve custom colour overlay on inline images   
    I've removed everything and re-added the code and it's working again! 
    The only question left is how do I center the overlay text within the box and style it?
     
    Thank you. 
  17. Like
    Red_Dot_Design reacted to Ziggy in How to achieve custom colour overlay on inline images   
    Add this to your CSS:
    .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper { max-height: 100%; }
  18. Like
  19. Like
    Red_Dot_Design reacted to paul2009 in Is there a way to move all customers who have made commerce accounts into being Members without making them sign up again?   
    It isn't possible to migrate them automatically, but you can email these customers and explain how to access the new member area.
    If they are already paying for membership through the subscription product, you can provide them with a discount code to allow them to 'purchase' access to the member area without paying again.
    Did this help? Please give feedback by clicking an icon below  ⬇️
  20. Like
    Red_Dot_Design reacted to paul2009 in How to Change Logo Link in Top Navigation (Theme: Nolan)   
    @Red_Dot_Design Before I answer your specific question, I feel it only right to explain that your content warning on the homepage may not be seen by visitors to the site.
    This is because, once the site is live, users may arrive on the website from search results that take them to other pages on the site (like this link), bypassing the homepage completely.
    I just wanted to let you know in case you weren't aware 🙂

    To answer your question, the desktop and mobile versions of the site have separate site logos with separate settings. The code that you've reposted identifies the first one (desktop) and skips the second one (mobile). To change the link on the mobile version of the logo, you'll also need to add this:
    document.querySelector('.header-display-mobile .header-title .header-title-logo > a').setAttribute('href', '/home'); Add it after the first version so that it looks something like this:
    <script> (function() { window.addEventListener('DOMContentLoaded', () => { document.querySelector('.header-title-logo > a').setAttribute('href', '/home'); document.querySelector('.header-display-mobile .header-title .header-title-logo > a').setAttribute('href', '/home'); }); })() </script>  
×
×
  • 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.