Red_Dot_Design
-
Posts
36 -
Joined
-
Last visited
Reputation Activity
-
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!
-
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
-
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; } -
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.
-
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; } -
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?
-
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; } -
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.
-
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; }}
-
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
-
Red_Dot_Design got a reaction from Ziggy in How to achieve custom colour overlay on inline images
That's done it! Thank you.
-
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; }
-
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?
-
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?
-
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; } -
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.
-
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%; } -
Red_Dot_Design got a reaction from paul2009 in Is there a way to move all customers who have made commerce accounts into being Members without making them sign up again?
Amazing thank you so much.
-
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 ⬇️
-
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>