Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
.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,
Hi @AlphaWindshield, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @AlphaWindshield,
Please send me the store link, I will check it for you
Hi @AlphaWindshield , kindly share your store URL.
This is an accepted solution.
.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,
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:
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024