danielkyne

I'm just going to duplicate the section and set some custom CSS so the section with 4 side-by-side disappears from 1362px or smaller screen width and a new section appears with the 4 stacked vertically instead. Here's the code I'm using: /* Vertical stacking of pricing options */ @media screen and (max-width:1362px) { [data-section-id="62dec3c42f5a510e5d7c7d8a"] { display: none;} } @media screen and (min-width:1362px) { [data-section-id="62dff2e31cf79a2bdb95364c"] { display: none;} }

Site URL: https://www.opinionx.co/pricing2 I've built a pricing page using markdown blocks with custom code blocks. They work great on (1) large desktop screens and (2) vertical smartphone screens, but everything in-between causes a frustrating responsiveness issue -- the content becomes obscured as the blocks become skinnier and longer, until eventually they vertically stack. Any suggestions as to what I can do to prevent this issue in the middle of screen sizes (seems to be from 1362px width down to 767px where the distortion occurs and the cards don't get stacked vertically). Example screenshot: The page is https://opinionx.co/pricing2 and the password is just: 2

Ok thanks for the tip tuanphan, I'll add these suggestions and will keep an eye out for any issues. Daniel

Hi there, I have the same problem as the original post describes. I've been struggling with black borders showing on Wistia embeds for the past year and nothing ever seems to work for all screen sizes (example screenshot below, where it works on my normal browser dimensions but changing to a smaller screen size shows the lines again). This is currently live at opinionx.co. Would appreciate your help in trying to solve this for all screen dimensions. Daniel ---

Considering this is an iframe rather than a video embed block from Squarespace, I don't see why that would work? I've tried the same CSS with a few different .tags, such as .iframe and .wistia_responsive_wrapper (as that is what the div is called in this case) but none make any difference.

Site URL: https://opinionx.co I use iframes throughout our Squarespace site to embed interactive product demos, GIFs and videos. On our main landing page (https://opinionx.co), we use an autoplay video with a white background that is intended to blend into the overall site background. For some users, however, Squarespace seems to add a border to 2 of the 4 sides of the iframe. I've tried a few tricks (overflow, frame border) but nothing seems to get rid of it. 4th screenshot is of an embedded stack ranking survey, where the border should all be light grey but that 2 sided dark border pops up again (like on the video iframe). Anyone able to help?

Thanks for the DIY solution, Ed! I played around with implementing it just now, but given that the problem seems mostly confined to Slack and that I'd have to do a custom implementation for each page (particularly on the blog), I've decided that I'll just leave it as is. Pity that Squarespace doesn't have this set up for websites properly already, but I've got plenty of other fish to fry. Thanks for the help 🙂

Site URL: https://opinionx.co As a SaaS startup, we are active in a bunch of Slack-based communities that are relevant to our target customers and also use Slack for internal comms too. Whenever I share a link in Slack for a non-Squarespace site, it loads the site preview with a large image. Whenever I share a link to a Squarespace website, the Open-Graph image is really tiny and is placed to the right-hand side rather than beneath. Does anyone know why this is? I've also tried it with a bunch of other Squarespace sites (found via this link) and the same happens for all of them. Is there any fix for this or does Squarespace just not have up-to-date Open-Graph API integration? Images attached below showing normal website pitch.com versus Squarespace website opinionx.co.