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

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

Question

Posted (edited)

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.

Edited by kimcroach

Share this post


Link to post

Recommended Posts

  • 0

@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;
   }
   }





Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
Posted (edited)

@kimcroach Like this? or? 1 am here. Bedtime. Which screenshot do you want?, I'll send CSS tomorrow. alt text

alt text

Edited by tuanphan
Initial Revision

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

Thanks for the pointers and the captcha info.... I look forward to you sending the CSS to build this block into what I actually want

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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?

Share this post


Link to post
  • 0

@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;
}
}


Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
Posted (edited)

@kimcroach Where is form block? I can't find....

You can send me message via contact form. There are no notifications from SS answer forum....

Edited by tuanphan
Initial Revision

Share this post


Link to post
  • 0

The newsletter block is on the brand styles page at the bottom above the footer, in the not-linked section of pages. Let me know if you can access it. I tried sending you a message via your contact form link but it redirected me to pay pal.

Share this post


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