Blockshop Newsletter - aligning after adding new fields

Store Design
1

Hello

Hoping someone can help me with the newsletter signup?

I’ve added fields for first and last name into the liquid file but for some reason the fields aren’t level. Is there a way to ensure they are aligned equal? Also, any idea why the labels show up as different font styles?

website preview link is: https://0z643a959gijuq04-345362.shopifypreview.com

Thanks so much in advance!

Screenshot 2022-02-21 at 16.42.48.png

2

Hi @hannahdossary ,

I cannot figure out your global CSS or base CSS asset file. Your CSS files were theme–critical.css?v=12440669830547324919? [sm], and theme–async.css?v=12008571931253038180? [sm]. This theme might have the asset file remotely. If that so, I am not sure if the codes below will work.

Anyway, this code will work if you place it inside the newsletter section. to make sure textarea are align just paste the code below to the asset file. I added the text-transform to have them uniform on uppercase.

For the text design. The CSS code is excluding the data-item. The email seems to be an data item. See below the selector.

[data-item=accent-text], input, label:not([data-item]), textarea

Please mark as solution if this helps. Thank you

3

hi @made4Uo

thanks for your help! there’s actually 2 css files, but i am adding any custom css to theme–critical only.

can i check where i need to put that code in the newsletter.liquid file?

for the css code, where am i supposed to put this? it looks like an incomplete css code?

Thanks in advance!

4

Also, this is the code i have for the newsletter.liquid file just the body part)


      {% form 'customer', id: form_id, class: 'newsletter--form' %}
        

          
          
          
          
          

            
          

        

        {% if form.errors %}
          

          {% for field in form.errors %}
            {{ field }} {{ form.errors.messages[field] }}
          {% endfor %}
          

        {% endif %}

        {% if form.posted_successfully? %}
          
        {% endif %}

        

          {% comment %} remove the below line to display reCAPTCHA badge {% endcomment %}
          {{ 'shopify.online_store.spam_detection.disclaimer_html' | t }}
        

      {% endform %}
5

I figured it out! for anyone else using my code:

Make sure to set type to “text” and autocomplete should be “given-name” and “family-name”.

See code here:


      {% form 'customer', id: form_id, class: 'newsletter--form' %}
        

          
          
          
          
          

            
          

        

        {% if form.errors %}
          

          {% for field in form.errors %}
            {{ field }} {{ form.errors.messages[field] }}
          {% endfor %}
          

        {% endif %}

        {% if form.posted_successfully? %}
          
        {% endif %}

        

          {% comment %} remove the below line to display reCAPTCHA badge {% endcomment %}
          {{ 'shopify.online_store.spam_detection.disclaimer_html' | t }}
        

      {% endform %}

And CSS code to align the fields is:

.newsletter--lastname, .newsletter--firstname{
margin-bottom: 0px !important;
}