How can I move an email sign up form up the page on desktop view only?

[Jferguson1]

HI there,

I need help moving the email sign up form up the page just for desktop.

This is what the page looks like currently:

This is what id like it to look like:

Many thanks,

Joe

[devcoders]

Hi @Jferguson1
If you share your store URL and password with me, I will check and provide you with the solution.

[Jferguson1]

apologies for not adding a url.

https://www.tryy.co.uk

password - help

many thanks

[devcoders]

Hi @Jferguson1

• Go to Online Store → Theme → Edit code.
• Find the file assets/base.css and paste the code below at the bottom of the file."

div#shopify-section-template--21073429922132__image_with_text_LDm6UV {
margin-top: 0;
}
main#MainContent {
position: relative;
}
section#shopify-section-template--21073429922132__newsletter_UYq3RX {
position: absolute;
top: 43%;
left: 37%;
}

[Jferguson1]

Hi - the code has seemed to interact with the mobile display -

how do i make it not effect the mobile - many thanks

[devcoders]

Hi @Jferguson1

Remove old css and add this one.

@media only screen and (min-width: 749px) {
div#shopify-section-template--21073429922132__image_with_text_LDm6UV {
margin-top: 0;
}
main#MainContent {
position: relative;
}
section#shopify-section-template--21073429922132__newsletter_UYq3RX {
position: absolute;
top: 43%;
left: 37%;
}
}

[BSS-Commerce]

Hi @Jferguson1 ,

• You can try out the Subscribe email view pages module of our BSS: B2B Lock & Hide Price app.

• Our application will allow you to flexibly edit the content on the page, as well as display it on any page you want… and many more features.

I will try to help you fix it manually

Result:

Step 1: Go to admin → Themes → Edit code
Step 2: Find the theme.liquid file

Step 3: Add the code below before the closing tag of the body tag near the end of the theme.liquid file (see image)

  {% if true %}
      <style>
        .newsletter-form__field-wrapper input[name='contact[email]'] {
            border: 1px solid black;
            color: black !important;
        }
        
        .newsletter-form__field-wrapper input[name='contact[email]']:focus {
            outlineL none !important;
        }
        
        .newsletter-form__field-wrapper label.field__label {
            color: black;
        }
        
        .newsletter-form__field-wrapper button#Subscribe {
            color: black;
        }
      </style>
  
      <script>
      
      setTimeout(function() {
          const bannerMedia = document.querySelector('.banner__media.media.scroll-trigger.animate--fade-in');
          const formClone = document.querySelector('#contact_form').cloneNode(true);
          document.querySelector('#contact_form').remove();
          bannerMedia.parentNode.insertBefore(formClone, bannerMedia.nextSibling);
          
          formClone.style.position = 'fixed';
          formClone.style.top = '42%';
          formClone.style.left = '50%';
          formClone.style.transform = 'translate(-50%, -50%)';
          formClone.style.zIndex = '9999';
      }, 1000); 
      
      </script>
    {%- endif -%}

Hope it helps @Jferguson1