Various CSS Issues

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

Hi folks,

Just bumping this up to see if anybody is able to assist?

Many thanks,

Thomas

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.

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

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%;
    }}}
}