Jump to content

Custom CSS Code to optimize newsletter block on mobile

Recommended Posts

  • Replies 4
  • Views 938
  • Created
  • Last Reply
38 minutes ago, ambiancecurator said:

Site URL: https://www.ambiancecurator.com/

Hi there! I am trying to edit the mobile version of my website layout so that the Sign Up button is on the right side of where website visitors need to input their email address.  Does anyone know how to do this? Attached a photo of what I'm referencing.

unnamed.jpeg

yes we can. attachment is the screenshot how it will looks in one line. If you want it tell me i will send you code.

Ambiance-Curator.png

Link to comment
9 minutes ago, ambiancecurator said:

can you please share the code here so anyone else that has the same issue can fix it?

below is the code. please try and let me know if it works perfect for you.
 

@media (max-width: 480px) {
    .newsletter-form-body {
        display: flex;
        .form-fields {
            width: 60%;
            .form-item {
                width: 100% !important;
                min-width: unset !important;
                input {
                    width: 100%;
                }
            }

        }
        .newsletter-form-button-wrapper {
            width: 40%;
            .newsletter-form-button {
                padding: 1.4rem 1rem !important;
            }
        }
    }
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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