thomasjpm Posted January 21, 2021 Share Posted January 21, 2021 Site URL: https://carillon-herring-5pyy.squarespace.com/ Hi Squarespace Forum! I'm currently designing a new website and experiencing a few different issues - any help would be greatly appreciated. #1 - The Blog Summary Block seems to be oddly aligned with it almost skipping a square, as opposed to it being in line with 'Blog' on the left-hand side. Is there a way to fix this? #2 - We also have custom section borders, which are SVG files set to full width and to inherit the colour of the section below. However, it's currently behaving differently (changing width, changing colour) on different sections, and we have duplicated the CSS each time for each section. Is there any way to write the CSS so it applies to all section edges, and remains full width, instead of having to keep doubling down on the CSS, and sits in the same place, so we don't have to keep amending the margins to position it? As you can see in the image below, the orange border isn't full width, yet the green paper tear edge is - both share the same CSS. #3 - Lastly, we have a custom header in so far as the Open Table widget is a part of it. Ideally, we'd like the 'Find a Table' button to sit on the same line as the other dropdown boxes. Also, the header is cutting off a portion of the first page section on every page - is there a way to fix this? The website in question is: https://carillon-herring-5pyy.squarespace.com/ Password: 'test' ---- As mentioned, any help is greatly appreciated and thank you in advance, Thomas Link to comment
thomasjpm Posted February 1, 2021 Author Share Posted February 1, 2021 Hi folks, Just bumping this up to see if anybody is able to assist? Many thanks, Thomas Link to comment
DonnaMartinek Posted August 11, 2021 Share Posted August 11, 2021 Can you please copy and paste your css code to do this? I am having difficulty doing this in my site. I appreciate it and thank you in advance. Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/12/2021 at 3:16 AM, DonnaMartinek said: Can you please copy and paste your css code to do this? I am having difficulty doing this in my site. I appreciate it and thank you in advance. Can you share link to your site? We can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
DonnaMartinek Posted September 3, 2021 Share Posted September 3, 2021 Thank you so very much and my apologizes for the delay in responding. I wound up using just a colored background on the website. But here was the code that I was trying to use. #siteWrapper [data-section-id="datasectionidgoeshere"] { .section-background { overflow: visible; &:after { content: ''; width: 100%; height: 100%; bottom: 0; left: 0; background: inherit; -webkit-mask: url(LINK TO SVG HERE) top no-repeat; mask: url(LINK TO SVG HERE) top no-repeat; margin-bottom: 1px; transform: translateY(100%); position: absolute; pointer-events: none; @media screen and (max-width: 800px) { -webkit-mask-size: 300% 50%; mask-size: 300% 50%; }}} } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment