Jump to content

Custom Newsletter Form Help

Recommended Posts

I pulled some code from a Squarespace blog to customize the newsletter block. The submit button label is overflowing the block wrapper at viewport widths less than ~ 420px. I can't find where that's fixable in the CSS.

 

.newsletter-form-header{
  display: none;
}
.newsletter-block {
  padding-top: 0 !important;
  .newsletter-form-wrapper {
    background-color: transparent;
    padding: 0 !important;
    .newsletter-form-body {
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -ms-grid-row-align: center;
      align-items:  ;
      display: flex;
      padding-bottom: 0;
      padding-right: 10px;
      border: 1px solid black;
      background-color: hsla(0, 0%, 100%, 0.08);
      .newsletter-form-fields-wrapper {
        width:  ~"calc(75% - 8px)";
        margin: 0px;
        .newsletter-form-field-wrapper {
          display: block;
          width: 100%;
          padding: 0px;
        }
        input {
          font-family: ;
          color: black;
          font-size: 16px;
          font-weight: 500;
          text-transform: none;
          padding: 15px 10px;
          background-color: transparent;
          @media screen and (max-width: 640px) {
            padding: 15px 15px;
          }
          @media screen and (max-width: 420px) {
            padding: 17px 0 17px 12px;
          }
          display: block;
          border: none;
          &::placeholder{
            font-size: 16px;
            line-height: 1.4em;
            letter-spacing: 0;
            color: black !important; 
          }
        }
        @media screen and (max-width: 1350px) {
          width:  ~"calc(70% - 8px)";
        }
        @media screen and (max-width: 1200px) {
          width:  ~"calc(64%)";
        }
        @media screen and (max-width: 1024px) {
          width:  ~"calc(75%)";
        }
      }
      .newsletter-form-button-wrapper {
        width: 24%;
        height: 100%;
        margin: 0px;
        padding: 0;
        margin-top: 0px;
        vertical-align: middle;
        button {
          background-color: transparent !important;
          border: unset !important;
          vertical-align: top;
          box-shadow: unset;
          padding: 17px;
          width: 100%;
          font-family: 'Copperplate';
          font-size: 0.85em;
          line-height: 1.5em;
          letter-spacing: 0;
          text-align: right !important;
          span {
            text-align: right !important;
            text-transform: lowercase;
            color: black !important;
            font-weight: 600;
            &:hover {
              opacity: .7;
            }
          }
          @media screen and (max-width: 1024px) {
            text-align: right;
            padding-left: 0;
            padding-right: 17px;
          }
          @media screen and (max-width: 640px) {
            text-align: right;
            padding-left: 0;
            padding-right: 10;
          }
        }
        @media screen and (max-width: 1350px) {
          text-align: right;
          padding: 0 30px;
          width: 32%;
          .newsletter-form-button {
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1024px) {
          text-align: right;
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 0;
          padding-right: 15px;
        }
        @media screen and (max-width: 640px) {
          padding-right: 2px;
        }
      }
      @media screen and (max-width: 1200px) {
        text-align: right;
        width: 100%;
      }
    }
  }
  .newsletter-form-footnote {
    display: none;
    margin-top: 16px;
  } 
  }

 

IMG_7565.jpg

Link to comment
  • Replies 3
  • Views 207
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Add to Design > Custom CSS

@media screen and (max-width:767px) {
button.newsletter-form-button.sqs-system-button.sqs-editable-button-layout.sqs-editable-button-style.sqs-editable-button-shape.sqs-button-element--primary {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
}

 

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

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.