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

{Need Help}: Newsletter Block Formatting for Mobile


RobertTom6565

Question

Site URL: https://haystackd.squarespace.com/

Hello there-

I'm kindly asking for some help formatting the newsletter block for mobile in SquareSpace 7.1. I like the way the block is currently formatted for desktop and it would be great to maintain the same side-by-side positioning of the button and email field in mobile. Despite numerous attempts via CSS, I've had no luck getting the block to remain on a single line when converting to mobile.

I've attached an image which shows what I'm ultimately looking to achieve via mobile display below.  Thanks!

Screen Shot 2020-08-05 at 2.18.12 AM.png

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://haystackd.squarespace.com/ Hello there- I'm kindly asking for some help formatting the newsletter block for mobile in SquareSpace 7.1. I like the way the block is currently fo

Posted Images

7 answers to this question

Recommended Posts

  • 0

Agreed! Would love some help with this. 

My site is here. Scroll all the way to the bottom to find the newsletter block.

On desktop the newsletter block looks great but the whole thing is too long for mobile/tablet. I want to scale back so it's more responsive and matches the sizing of mobile/tablet. And on tablet, the text is weirdly shifted to the right.

Let me know if this isn't clear. Below is the CSS I currently have to format the text sizing. Thanks!

.newsletter-block .newsletter-form-header-title {

  font-family: adobe-garamond-pro;
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1em;
  text-transform: none;


  }

.newsletter-block .newsletter-form-header-description p {

  font-family: adobe-garamond-pro;
  font-size: 24px;
  line-height: 1.65em;
  
  }
 
.newsletter-block .newsletter-form-button {

  font-family: din-condensed-web;
  letter-spacing: 0.1em;
  
  }

 

Link to post
  • 0
On 11/10/2020 at 7:50 AM, marianaalvarado said:

Agreed! Would love some help with this. 

My site is here. Scroll all the way to the bottom to find the newsletter block.

On desktop the newsletter block looks great but the whole thing is too long for mobile/tablet. I want to scale back so it's more responsive and matches the sizing of mobile/tablet. And on tablet, the text is weirdly shifted to the right.

Let me know if this isn't clear. Below is the CSS I currently have to format the text sizing. Thanks!

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#newsletter-copy h2 {
    font-size: 30px;
}
section#newsletter-copy .newsletter-form-header-description * {
    font-size: 17px !important;
}
section#newsletter-copy .newsletter-form-header {
    width: 100%;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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