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

Email Subscription Form off-center on mobile


jmher

Question

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 post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0
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 post
  • 0
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. 

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