Jump to content

Conflicting CSS making form design wonky - help appreciated!

Recommended Posts

Hi all,

Re: this is in regards to a page on my site https://www.peoplethebrand.com/headline-formulas..

Having 2 issues: 

One:

My lightbox form is the wrong color. See attached image.

I'm trying to make it so that the lightbox form is:

background: white

form fields: white

background border: black

form fields border: black

font: black

However a squarespace agent said that I have conflicting custom css code that's making it this way.

I'm pasting the code here for your review: how should I change it to get the result I'm looking for?

/* Summary Title Link Font and Size */
.summary-title-link {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; 
    font-weight: 400; /* Adjust the font weight as needed */
}

/* Summary Metadata Font and Size */
.summary-metadata-item {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; /* Adjust the size as needed */
    font-style: italic; /* Italicize the metadata */
}

/* Adjusting Category Font Size */
.summary-metadata-item a {
    font-size: 18px; /* Adjust the size as needed */
}

/* Excerpt Copy Font and Size (using Georgia) */
.summary-excerpt {
    font-family: 'Georgia', serif;
    font-size: 16px; /* Adjust the size as needed */
    line-height: 1.5; /* Adjust the line height as needed */
}
body[class*="type-blog"].view-item .section-border, body[class*="type-blog"].view-item .section-background {
    background-color: white !important;
}
body[class*="type-blog"].view-item section a {
    color: #574EF5 !important;
}
.sqs-block-content .lightbox-handle {
 background: #ffffff !important;
}
.sqs-block-content .lightbox-handle:hover {
 color: #fff;
 font-weight: 400;
 background: #B1C7B4;
}
.lightbox-handle {
  color: #000; /* Set initial text color */
  background-color: transparent; /* Set initial background color */
  &:hover {
    color: #fff !important; /* Change text color to white on hover */
    background-color: #000 !important; /* Change background color to black on hover */
  }
}

.lightbox-content {
  background: #ff3cc7 !important;
  .form-button-wrapper .form-submit-button {
    color: #fff; /* Set initial text color */
    background-color: transparent; /* Set initial background color */
    &:hover {
      color: #000 !important; /* Change text color to black on hover */
      background-color: #fff !important; /* Change background color to white on hover */
    }
  }
}

 

Issue two:

On mobile view the form lightbox moves to top of screenview and spacing looks wonky. See pic. Any way to bring the form down to center of screenview? 

Thanks in advance!
Ashley

 

 

image.png

Screenshot 2024-04-29 at 12.16.34 PM.png

Link to comment
  • Replies 1
  • Views 396
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.