Email Subscription Form off-center on mobile

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

It looks fine here. Did you solve problem?

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?

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

3. (Tablet-Homepage) Resize title?

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

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

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

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.

On 5/3/2021 at 9:56 PM, tuanphan said:

It looks fine here. Did you solve problem?

I did end up solving that original issue. 

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

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

 

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