Jump to content

How can I adjust the newsletter block to have text aligned left and form and button aligned right?

Recommended Posts

I've been able to align the header title and description to the left and used a max-width of 50% to keep the text only on the left of the block but in trying to align the email form and submit button to float to the right beside the text it doesn't work. On further inspection I realized that even though the max-width is set to 50% the header title and description space still occupies the entire newsletter block. Is there a CSS workaround to achieve the layout that I want? I'm at my wits end and super frustrated at this point.

Link to comment
  • Replies 27
  • Views 3.7k
  • Created
  • Last Reply

@kimcroach When i click on about us page (you sent above)

We couldn't find the page you were looking for. This is either because:

There is an error in the URL entered into your web browser. Please check the URL and try again.The page you are looking for has been moved or deleted.You can return to our homepage by clicking here, or you can try searching for the content you are seeking by clicking here.

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

With the font styles of the second image, and I'd like the consent statement to be a small checkbox under the email form like the first image but with a link to our privacy policy and the subscribe button below that next to a reCAPTCHA button (but I'm not sure how to build in the reCAPTCHA.Also I'd prefer for the newsletter block to be a statement on the page - same height as width and how would I round the corners similar to the subscribe button?

I know this is a lot but I'm a complete novice here but eager to learn. You should get some rest too. Thanks!

Link to comment

@kimcroach Maybe font style should be the same, I have never edited the font, maybe I did something wrong so the font in the two screenshots was different

  1. Checkbox: CSS can't do that. You need to edit the form, and find checkbox option...
  2. Captcha: https://answers.squarespace.com/questions/166076/how-can-i-put-captcha-on-contact-forms.html
  3. Round corners: Just a line of CSS

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

@kimcroach Add to Home > Design > Custom CSS


@media screen and (min-width:992px) {
   header.newsletter-form-header {
       float: left !important;
       width: 50% !important;
       margin-right: 20px !important;
   }
   form.newsletter-form:after {
       content: "";
       display: table;
       clear: both;
   }
   }





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

@tuanphan thanks so much this worked exactly as you outlined in screenshot 1, but I did go back in and add in the CSS to modify the font style.

One more thing I did set up Captcha but realized that it doesn't work on the specific newsletter form block, only the regular form block and that also goes for the checkbox too.

Link to comment

@tuanphan If possible, a couple more things:

  1. I understand the first part of the code but I would also like to know what the second part specifically addresses (just for future reference)

  2. What CSS would make the height of the newsletter block the same as the width of the block?

  3. What CSS would round the corners of the entire newsletter block?

Link to comment

@kimcroach


@media screen and (min-width:992px) {
/* Corner */
.newsletter-block .newsletter-form-wrapper {
   border-radius: 42px;
}
/* Same height and width */
.newsletter-block .newsletter-form-wrapper {
   width: 1000px;
   height: 1000px;
}
}


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

This gave me the rounded corners and matching height and width but its aligned the entire block to the right of the page instead of the center. How can I fix this to ensure the block remains in the center of the page?

Link to comment

Archived

This topic is now archived and is closed to further replies.


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