LUDLOW

@tuanphan Could we please see a version of this to where a simple hyperlink/text could be clicked for copy? We would like to have specific anchor link URLs that could be more easily sharable. Like this: Click To Copy/Share This Section P.S. We're using SquareKicker for the anchor link generation.

@paul2009 can these popups be single button instead of dual?

@tuanphan yes please. We still need help with this.

@tuanphan thanks! It seems off though. Your provided CSS was able to contain the image to the mobile screen width, but not make it fullscreen. See the before and after screenshots attached. Here is all the CSS that we have used for this Pop Up. Maybe there is a conflict within it? We were first able to use the CSS to add an image. Then we made the close buttons disappear. Now we are trying to make the mobile popup fullscreen. I'm wondering if we had the order incorrect? Or there is a typo somewhere? Website: https://www.atria-advisorloans.com/ Password: ATRIAlendingPORTAL /* Promotional popup mobile */ @media screen and (max-width: 767px) { .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy { background: transparent; } .sqs-slice-group.group-copy.copy-layer-background * { color: white !important } .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy { background: transparent !important; } .sqs-slice-group.group-copy.copy-layer-background * { color: white !important } .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] { display: flex !important } } /* popup close X */ .sqs-popup-overlay-close { opacity: 0 !important; } /* popup close X mobile */ .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close:before { opacity: 0 !important; } /* Mobile popup full image */ @media screen and (max-width:767px) { .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img { object-fit: contain !important; } }

@tuanphan I was able to solve part of this, but we still need help. By using the CSS at the bottom of this message, I was able to hide the close button "X" and the corresponding auto-populated square around it. For anyone concerned with advertising laws, this is a private site, and we're using the pop-up as a lock screen. However, we still need assistance on the following: Website: https://www.atria-advisorloans.com/ Password: ATRIAlendingPORTAL Is there a way to... Desktop: Disable the click around? Because it's a private site, we don't want people to bypass our modified lock screen by simply clicking anywhere on the fullscreen pop-up. Alternatively, perhaps the "X" can be designated as the only "close window" function. Mobile: Make the background fullscreen? Being pinned to the bottom defeats our purposes for this pop-up. See red section/arrow in attached image. CSS for hiding the close X and border: /* popup close X */ .sqs-popup-overlay-close { opacity: 0 !important; } /* popup close X mobile */ .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close:before { opacity: 0 !important; }

Nice! This didn't work out for me. But it got me looking at the individual elements, and I was able to change the opacity to "0" by editing the CSS you shared. Much appreciated!

Thank you very much! I greatly appreciate you sharing this. Now on to solve the autogenerated box around it...

@tuanphan no worries! I know you're busy. Yes please, we still need help with this.

@omventure were you able to solve this? We are having the same issue of trying to color the close button "X" on mobile.

@tuanphan I used this CSS, and it worked as described. Looking to edit it further though because we are trying to use the Popup as a lock screen for a private website since the traditional lock screen will not do what we need - which is a simple email verification for access. Too bad we can't use a custom landing page as a lock screen. Or can we? Website: https://www.atria-advisorloans.com/ Password: ATRIAlendingPORTAL Is there a way to... Desktop & Mobile: Disable the click around? We're using the full screen for a reason, and don't want people to bypass it by simply clicking anywhere on the screen. Mobile: Make the background full screen? See red section/arrow in attached image. Mobile: Hide or recolor the "x" and box? See yellow arrows in attached image. Again, none of this would be an issue if we could lock the entire website with an email verification instead of a single shared PW. Open to other ideas here as well. Member Areas will NOT work because we are already embedding an app that requires login credentials, and we don't want users to have to manage a SQSP Member Profile AND an App profile. That would be silly. Also, the possible option for SSO is way above my understanding, and we would need to hire someone. That's fine, but don't know where to look, or what a fair market rate would be. Thank you for any and all of your assistance!

I'm also interested in this. Can't just put it in the description because we'll be using the universal filter. We will have businesses listed for sale on the site, none of which will be actually purchasable online. But many of them will be $1MM+ @paul2009 if you've got a code to remove the limit or something to 10x the input on specific listings, please let me know. https://www.atria-advisorloans.com/marketplace PW: advisorloans

@SimonAnnermo I agree with @paul2009 here... For the most part, it's not something that can be done (easily). However, Squarespace has a partnership with 99designs to manage their own marketplace. And I learned recently that 99designs has an API integration. It's been very difficult to get more info on how, or if, it could be used for these situations, but it couldn't hurt to research further on your own. Best of luck!

@creedon @tuanphan Tagging you two because you both have touched on similar solutions in the past... https://www.atria-advisorloans.com/marketplace PW: advisorloans The goal for our website is to host a private marketplace for buying and selling client businesses. The site will ultimately be member password protected and by invitation only. Ideally, we would like to create a button in the product description, or redirect the "Add to Cart." I can do either of these with existing resources, so here is the actual challenge: We would like said button to open a form that auto-populates the product title and/or SKU in a type field. That form would then be submitted to our staff to act as an intermediary broker between the buyer and seller. In a perfect world, the form would also auto-populate their member name and email address (since they would have to be logged in to access the site anyways). If a form is unreasonable, then perhaps an email with similar auto-populating functionality. Thoughts? Open to creative options here. The difficult part is the auto-populating because we want the clients to have the smoothest buying experience possible by typing as little as possible; ideally typing nothing at all and simply clicking a button. Am I crazy? Maybe. But, nonetheless, I would certainly love your feedback and assistance if you could please lend any. Happy to hire directly as well to anyone reading this. Thank you!

That was perfect! Thank you so much.

Site URL: https://www.sbadna.com Trying to figure out how to redirect users from www.sbadna.com/lenders to a more mobile friendly version of that page (www.sbadna.com/lenders-mobile) when viewing from a phone/tablet rather than a full desktop/laptop. Any ideas? @tuanphan is this possible? Thank you for any assistance!

Yup! From @tuanphan: Try adding to Design > custom CSS /* hide fallback image on desktop */ @media screen and (min-width:992px) { body.homepage article section:first-child img { display: none !important; } }

Bingo! Thank you very much.

@Tiger_Thomas and @tuanphan What was the final CSS you used for wrapping the text? Trying to get Gallery Image Titles and Descriptions to wrap on https://www.sbamatch.com/home-copy Thank you!

Clever using linked images as arrows. We got this to work with section ID updates. Thank you!

@tuanphan Either that, or this. Whichever is easier for mobile viewing. I think I like your version more.

@tuanphan I think I'm missing something. Trying to replicate the justified spacing between the L&R arrows globally, but can't seem to nail it down. URL: https://www.sbamatch.com/articles-summary Have any thoughts? Thank you!

Adding to this chain... I use the following code in 7.1 to hide the blog titles in the Basic Grid summary if you ever divert from the masonry format: .blog-basic-grid .blog-title { display: none; }

@tuanphan That did the trick! Thank you very much.

@tuanphan I could change site margins, but that would move everything. I suppose another workaround (since we don't really need sound) could be to turn this video into a background and use CSS to keep the aspect ratio. But I'm coming up blank on that too. Thoughts?

@tuanphan I'm struggling with the same thing. Using the following code, but I'm still getting a bit of space left and right. Tried moving to 0vw (from 10vw) but still the same result. Alterations from the code above are in RED. Where have I gone wrong, and how can I get this to full bleed? Thank you! /* Fullbleed video */ body#collection-6061cd1dc2b0965023445946 section.Main-content { padding-left: 0px; padding-right: 0px; } div#block-yui_3_17_2_1_1617022196848_14515 { padding-left: 0vw; padding-right: 0vw; } 7.1 URL: https://www.sbamatch.com/