Jump to content

Email Subscription Form off-center on mobile

Recommended Posts

Site URL: https://www.lawforward.org

Added a subscription form on the home page per clients request (I am not the original designer for the website) and when on mobile the form box for entering an email address is completely off to the right. I have done a lot of searching and tried a few different code options but nothing is working. Here's what I have for my custom css for that section:

 

///subscribe section below blog///
[data-section-id="608ebd148a421213d861a23a"]{
  .newsletter-form-header-title {
    font-family: 'GT-WALSHEIM-BLACK-OBLIQUE'!important;
letter-spacing: 0px;
text-transform: uppercase;
  }
  .sqs-block-newsletter .newsletter-form-field-element {
    margin-left: 0px !important;
    padding-left: 0px !important;

}
#block-yui_3_17_2_1_1619977146166_6048 {
  background-color: #D9ECF1;
  padding: 65px;
  border-style: solid;
  border-width: 5px;
  border-color: #254757; /*navy*/ 
  @media screen and (max-width: 641px) {
h2 { text-align: center !important;
  letter-spacing: 1px;
  line-height: 20px; }
  }
}
[data-section-id="608ebd148a421213d861a23a"]{
 @media screen and (max-width: 641px) { .sqs-block-newsletter .newsletter-form-field-element {
    margin-left: 0px !important;
    padding-left: 0px !important;
   margin-right: 0px !important;
}   
  }}


[data-section-id="608ebd148a421213d861a23a"]{
  .newsletter-block:hover .newsletter-form-button:hover {  
  background-color: #254757 !important;;
  color: #ffffff !important;
  opacity: 1 !important;}
}

Screen Shot 2021-05-02 at 4.04.58 PM.png

Link to comment
  • Replies 5
  • Views 722
  • Created
  • Last Reply

Top Posters In This Topic

On 5/4/2021 at 8:50 AM, tuanphan said:

I found some other problems. Do you want to fix?

Site URL – https://lawforward.org/

1. (Mobile-Homepage) Add a left padding on email input?

lawforward.org-01-min.png

2. (Mobile-Homepage) Blue bar on right of screen

lawforward.org-02-min.png

3. (Tablet-Homepage) Resize title?

lawforward.org-03-min.png

4. (Tablet-Homepage) Blue bar on right of screen + Increase right column width?

lawforward.org-04-min.png

5. (Tablet-About us) Reduce section height?

lawforward.org-05-min.png

6. (Tablet-Our work) Increase text width?

lawforward.org-06-min.png

Yes, I would love to!! I did not create the website but am working to help them fix little things like this as I come across them.

Link to comment
  • 1 year later...
On 12/14/2022 at 3:40 AM, tiffanymarietate said:

Hi, I am having the same issue on my site. It's only visible on certain mobile views.

Has anyone found any CSS to fix this? I've tried a lot of margin and padding options but none of my usual tricks are working! 

Thank you! 

www.palomalifestyleco.com

 

image.thumb.png.a7715036de95f956da817ba9fa59aaca.png

Add this to Design > Custom CSS

/* Fix email input */
@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper {
    min-width: unset !important;
}
}

 

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

Create an account or sign in to comment

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

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