Jump to content

jmaasberg

Circle Member
  • Posts

    8
  • Joined

  • Last visited

Posts posted by jmaasberg

  1. On 4/3/2024 at 10:21 AM, JA_ATL said:

    trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you!

    Did you ever figure out how to do this?

  2. 1 hour ago, Beyondspace said:

    I try the trick related to position

    #block-0c9ec2652db859ed33a7  .react-form-contents {
      position: relative;
    }
    #block-0c9ec2652db859ed33a7 .form-button-wrapper {
      width: 45%;
      float:left;
      position: absolute;
      bottom: 0;
      right: 0;
      margin-bottom: var(--form-field-spacing-bottom);
      margin-right: 4%;
    }
    #block-0c9ec2652db859ed33a7 .form-button-wrapper button{
      height: 40.4px;
      display: flex;
      justify-content: center;
      align-content: center;
    
    }
    #block-0c9ec2652db859ed33a7 .form-button-wrapper button [aria-label]{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items:center;
    }
    #block-0c9ec2652db859ed33a7 .form-button-wrapper button [aria-label] span:last-child{
      display: none;
    }

    My testing

    image.png.dcff013a721c4e3136006974e602c60f.png

    Let me know how it works on your site

    Wow that worked great, thank you! If it's not too much to ask, how would I go about doing this if there were only an email field? 

    image.png.b983edf50d99a68a21b86af5b4fbd97b.png

  3. Hey All,

    https://bluewin.squarespace.com/sign-up-demos
    PW: 12345

    I would like to use CSS to place the submit button for this form shown below in-line with the Zip field and am not sure how to accomplish this. 

    image.png.5be73528b464b4ecbb505085ccb363f7.png

    I would also like to know how to do something similar with just an email field to display the submit button in-line to the right of the field with a space between, keeping it flush etc.

    image.png.a4dcfa04a7cf77140c0437ca13e52149.png

    I have the following code applied to forms sidewide at the moment to break up the First/Last fields.

    image.png.16d4c4777345076be780147e7ca67877.png

    //FORM ADJUSTMENTS//
    #page{
    .field-list {
    display: flex!important;
    flex-wrap: wrap!important;
    }
    
    /* These will be Full Width*/
    .form-item:nth-child(3),
    .form-item:nth-child(4),
    .form-item:nth-child(5),
    .form-item:nth-child(6),{
    width: 100% !important;
    }
    
    /* These Will Be Beside Each Other */
    /* LEFT */
    .form-item:nth-child(1),
    .form-item:nth-child(3),{
    width: 48%  !important;
    margin-right: 4% !important;
    }
    /* RIGHT */
    .form-item:nth-child(2),
    .form-item:nth-child(4),{
    width: 48%  !important;
    }
    }

    Thank you!

  4. 3 minutes ago, creedon said:

    The have a syntax error in your code in Design > Custom CSS.

    .sqs-block-accordion .accordion-item__title-wrapper {
      background-color: #e9bd49 ff !important
    }

    It should be...

    .sqs-block-accordion .accordion-item__title-wrapper {
    
      background-color: #e9bd49ff;
      
      }

    Let us know how it goes.

    Thanks for noticing this! I fixed it and it still wasn't working outside the editor, but I just tried removing the end ff from the hexadecimal colors and it now seems to be working. Strange, I thought that worked. Thank you!

  5. Hello,

    I am having an issue where my custom css recoloring some things like this accordion and the newsletter button on the homepage are loading and visible while in the editor, but not live. I am not sure why, hoping for some help!

    Site: tracyforauburn.com
    PW: vibe2023

    //ACCORDION
    .sqs-block-accordion .accordion-item__title-wrapper {
        background-color: #e9bd49ff!important;
    }

     

    //HOME NEWSLETTER
    section[data-section-id="64820ab29499916ee71fa2d4"] {
    .newsletter-block {padding-top: 0; padding-bottom: 0}
    .sqs-block-newsletter .newsletter-form-field-element {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
      background-color: #ebede8ff!important;
    }
    button.newsletter-form-button.sqs-system-button {
        padding-top: 15px !important;
        padding-bottom: 16px !important;
      background-color: #b24a5dff!important;
      color: #ebede8ff!important;
      }}

     

    Example:

    image.png.32b4f6ee60fe730d65825ab914089537.png

    image.png.493b62c586ad1c3022bedc560d85b523.png

    image.png.b30f7c3b7c7ff283213b1a1f48978fbb.png

    image.png.63badbabb9fe74ccb28bb75ac874b246.png

  6. Site URL: https://mayordanaralph.squarespace.com/

    Hey all, had a question about Tablet View and how its affecting my content on a specific page (.collection-type-index #danas-priorities). 

    Site PW: bluemini

    On Desktop and Mobile it looks fine, but Tablet view is doing something wonky. I'd like to make 4 images with text across the screen work for each 'column', but three would work. Just not sure how to do this.

    Desktop.PNG

    Tablet.PNG

×
×
  • 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.