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

Asked by Kacia,

Followers 3

Question

Kacia    8

Kacia
Posted

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

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

creedon

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

Kacia

That worked perfectly, thank you so much!!

Posted Images

4 answers to this question

Recommended Posts

  • 0

creedon    561

creedon
Posted

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

Kacia    8

Kacia
  • Author
Posted
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

tuanphan    9,305

tuanphan
Posted

@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

You can send your question to my email to get faster answer.

How to:

-- Yup!

Link to post
  • 0

Kacia    8

Kacia
  • Author
Posted
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

Sign Up / Login
Followers 3
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources