Editing the email sign up section

[AlphaWindshield]

I am having a hard time editing the layout of the email sign up section on my home page. It looks a little bulky currently and I don't love the way it looks. Hoping someone can help me edit the layout. I am using the Dawn theme. Wanting to make it look like the included image.

[BSSCommerce-HDL]

Hi @AlphaWindshield, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

[namphan]

Hi @AlphaWindshield,

Please send me the store link, I will check it for you

[websensepro]

Hi @AlphaWindshield , kindly share your store URL.

[Vinsinfo]

@AlphaWindshield Please follow below steps to change the newsletter style. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Edit code" button from the current theme.

3. Go to "newsletter.liquid" file.

4. Then search id="Subscribe" and remove the below code inside the button element and enter "subscribe" like below attached image and save changes.

<span class="svg-wrapper">

{{- 'icon-arrow.svg' | inline_asset_content -}}

</span>

5. Then Go to "base.css" and paste the below code at the bottom of the file and save changes.

.newsletter__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #595959;
    color: #FFFFFF;
    align-items: center;
}
.newsletter__wrapper h2 {
    color: #FFFFFF !important;
    text-transform: uppercase;
}
.newsletter__wrapper .newsletter__subheading {
    width: 100%;
}
.newsletter__wrapper #Subscribe {
    width: max-content;
    padding: 5px 20px;
    background-color: #000000;
    color: #FFFFFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.newsletter__wrapper .newsletter-form__field-wrapper {
    max-width: 48rem !important;
}
.newsletter-form__field-wrapper .field__input {
    border-radius: 5px;
}
.newsletter-form__field-wrapper .field::after {
    box-shadow: none;
}
.newsletter-form__field-wrapper .field__input {
    padding-right: 11rem;
}

@media screen and (min-width:750px) {
    .newsletter__wrapper {
        grid-template-columns: 1fr 1fr;
        text-align: left; 
    }
    .newsletter__wrapper div:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0px !important;
    }
    .newsletter__wrapper .newsletter__subheading {
        margin: 0px !important; 
    }
    .newsletter-form {
        max-width: 48rem !important;
    }
}

Result will be like,

NOTE: If the provided solution not works. Please share your store URL to help you on this.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[AlphaWindshield]

www.alphawindshields.com. Thank you.

[namphan]

Hi @AlphaWindshield,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.newsletter__wrapper {
  display: grid;
  grid-template-areas:
  "heading"
  "text"
  "font";
  grid-template-columns: 1fr;
}
@media screen and (min-width: 750px) {
  .newsletter__wrapper {
    grid-template-areas:
        "heading font"
        "text font";
    grid-template-columns: auto 1fr;
  }
}
.newsletter__wrapper h2 {
  grid-area: heading;
  text-align: center;
}
@media screen and (min-width: 750px) {
  .newsletter__wrapper h2 {
    text-align: left;
  }
}
.newsletter__subheading {
  grid-area: text;
  text-align: left;
}
.newsletter__subheading+div {
  grid-area: font;
}
.newsletter-form,
.newsletter-form__field-wrapper {
  max-width: 50rem;
}

it will display like this: