Jump to content

Various CSS Issues

Recommended Posts

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?

344951255_Screenshot2021-01-21at10_03_13.thumb.png.c1b2100f5f2820a17f616ade5bd7e201.png

 

#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.

1638018693_Screenshot2021-01-21at10_05_12.thumb.png.a8b52656db788f32bb15c6401e82e03e.png

 

#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?1660910730_Screenshot2021-01-21at10_10_15.thumb.png.5d38a67766da698bb74c30546dd29eff.png

 

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
  • 2 weeks later...
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 6 months later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.