Shopify themes, liquid, logos, and UX
Hi, I'd like to make my newsletter section within the debut theme on the site www.cecilias.house look like the below image. Currently the text is stacked on top -- is there a code I can insert to make this happen?
Solved! Go to the solution
This is an accepted solution.
Dear @kadishap
Hope the following suggestions will help you
Go to the very bottom of this file and paste the following code:
/* Start */
.template-index .newsletter-section {padding-top: 0 !important;}
.template-index .newsletter-section .page-width {display: flex; align-items: center; justify-content: center;padding-top: 55px; padding-bottom: 55px;}
.template-index .newsletter-section .page-width .section-header {margin-bottom: 0 !important;width: 60%;}
.template-index .newsletter-section .page-width .section-header h2.h2 {font-size: 16px !important;}
.template-index .newsletter-section .page-width .section-header .rte p {font-size: 14px !important;}
.template-index .newsletter-section .page-width .form-single-field {max-width: 100% !important; margin-bottom: 0 !important; margin-right: 0 !important; margin-left: 30px !important;width: 40%;}
@media only screen and (max-width: 749px) {
.template-index .newsletter-section .page-width {flex-direction: column;}
.template-index .newsletter-section .page-width .section-header, .template-index .newsletter-section .page-width .form-single-field {width: 100% !important;}
.template-index .newsletter-section .page-width .form-single-field {margin: 30px !important;}
.template-index .newsletter-section .page-width {padding-bottom: 0px !important;}
}
/* End*/
Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
If you still need help you can contact us by using the link or email given at signature.
do you mean look your newsletter section?
Yes, I mean the newsletter section
This is how the section shows up for me
Yes, is possible yo above look at
This is an accepted solution.
Dear @kadishap
Hope the following suggestions will help you
Go to the very bottom of this file and paste the following code:
/* Start */
.template-index .newsletter-section {padding-top: 0 !important;}
.template-index .newsletter-section .page-width {display: flex; align-items: center; justify-content: center;padding-top: 55px; padding-bottom: 55px;}
.template-index .newsletter-section .page-width .section-header {margin-bottom: 0 !important;width: 60%;}
.template-index .newsletter-section .page-width .section-header h2.h2 {font-size: 16px !important;}
.template-index .newsletter-section .page-width .section-header .rte p {font-size: 14px !important;}
.template-index .newsletter-section .page-width .form-single-field {max-width: 100% !important; margin-bottom: 0 !important; margin-right: 0 !important; margin-left: 30px !important;width: 40%;}
@media only screen and (max-width: 749px) {
.template-index .newsletter-section .page-width {flex-direction: column;}
.template-index .newsletter-section .page-width .section-header, .template-index .newsletter-section .page-width .form-single-field {width: 100% !important;}
.template-index .newsletter-section .page-width .form-single-field {margin: 30px !important;}
.template-index .newsletter-section .page-width {padding-bottom: 0px !important;}
}
/* End*/
Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
If you still need help you can contact us by using the link or email given at signature.
I tried using this code on my debut site and it does not change the appearance of my newsletter section layout. I would also like it to look like the above, slimlined design.
Can you please assist with some code? My website is 400co.com.au.
Thanks
Laura
sorry for that issue can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.template-index .newsletter-section {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
Hi @KetanKumar that code had the opposite effect to what I am after, it made the padding around the newsletter section wider. I would like to transform the whole block to look like the image in my post. Can you please provide me with code to have it look exactly like this?
can you please provide image how do you have like image?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024