Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

modifying newsletter block in footer, version 7.1


Kacia

Question

Site URL: https://vibraphone-dove-dpfn.squarespace.com/

Hi, I'm trying to modify a newsletter block in my footer. I've already used this code to modify the field and button sizes, and to decrease the top and bottom margins of the newsletter body across the entire site:

/*newsletter field*/
.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/*newsletter body*/
.newsletter-form .newsletter-form-body {
  margin-top: -15px !important;
  margin-bottom: -25px !important;
}

/* newsletter button*/
.newsletter-form .newsletter-form-button {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

However, in the footer, I would like also to modify the h2 to either a smaller size or different font. And I want to decrease the space between the field element and the h2 to account for my omission of the newsletter block description. 

Any help would be appreciated! The password is: He@1ing

Thanks!

Kacia

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add the following to Design > Custom CSS. /* begin footer newsletter sign-up tighten up spacing for and smaller font */ #block-yui_3_17_2_1_1605583582666_22142.newsletter-block .newsletter-f

That worked perfectly, thank you so much!!

Posted Images

4 answers to this question

Recommended Posts

  • 0

Add the following to Design > Custom CSS.

/* begin footer newsletter sign-up tighten up spacing for and smaller font */

  #block-yui_3_17_2_1_1605583582666_22142.newsletter-block .newsletter-form-header-title {
  
    margin-bottom: 0;
    
    }
    
  #block-yui_3_17_2_1_1605583582666_22142 .newsletter-form-header-description {
  
    display: none;
    
    }
    
  @media screen and ( min-width: 0 ) and ( max-width:calc( 1596px - 1px ) ) and ( orientation:landscape ) {
  
    #block-yui_3_17_2_1_1605583582666_22142 .newsletter-form .newsletter-form-header-title {
    
      font-size: calc( 1.44vw + 0.5rem ) !important
      
      }
    }
    
  /* end footer newsletter sign-up tighten up spacing for and smaller font */

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
12 hours ago, creedon said:

Add the following to Design > Custom CSS.


/* begin footer newsletter sign-up tighten up spacing for and smaller font */

  #block-yui_3_17_2_1_1605583582666_22142.newsletter-block .newsletter-form-header-title {
  
    margin-bottom: 0;
    
    }
    
  #block-yui_3_17_2_1_1605583582666_22142 .newsletter-form-header-description {
  
    display: none;
    
    }
    
  @media screen and ( min-width: 0 ) and ( max-width:calc( 1596px - 1px ) ) and ( orientation:landscape ) {
  
    #block-yui_3_17_2_1_1605583582666_22142 .newsletter-form .newsletter-form-header-title {
    
      font-size: calc( 1.44vw + 0.5rem ) !important
      
      }
    }
    
  /* end footer newsletter sign-up tighten up spacing for and smaller font */

Let us know how it goes.

That worked perfectly, thank you so much!!

Link to post
  • 0

@Kacia I see this page doesn't look good on Tablet. You should check.

You can add this to Design > Custom CSS to increase right text width

/* Our approach text width */
@media screen and (max-width:991px) and (min-width:768px) {
body#collection-5fadc7e2dd1d4d0520ea5170 #page section:nth-child(2) .content {
    width: 90%;
}
}

https://vibraphone-dove-dpfn.squarespace.com/our-approach

image.thumb.png.371609d80140695db1c75ab8bd3e568b.png

Link to post
  • 0
2 hours ago, tuanphan said:

@Kacia I see this page doesn't look good on Tablet. You should check.

You can add this to Design > Custom CSS to increase right text width


/* Our approach text width */
@media screen and (max-width:991px) and (min-width:768px) {
body#collection-5fadc7e2dd1d4d0520ea5170 #page section:nth-child(2) .content {
    width: 90%;
}
}

https://vibraphone-dove-dpfn.squarespace.com/our-approach

image.thumb.png.371609d80140695db1c75ab8bd3e568b.png

 @tuanphanOh, I didn't realize the paragraph line could be forced to break like that. Thank you for catching that and for your suggestion. This is definitely code above my level!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...