Solved

Debut theme - newsletter section layout

kadishap
Tourist
4 0 2

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?

Screen Shot 2021-01-18 at 12.26.54 PM.png

Accepted Solution (1)

MS-WEB-DESIGNER
Shopify Partner
3012 181 484

This is an accepted solution.

Dear @kadishap 

Hope the following suggestions will help you

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  •  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.

  • Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

View solution in original post

Replies 10 (10)

KetanKumar
Shopify Partner
36839 3635 11972

@kadishap 

do you mean look your newsletter section?

KetanKumar_0-1610993648601.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kadishap
Tourist
4 0 2

Yes, I mean the newsletter section

kadishap
Tourist
4 0 2

This is how the section shows up for me Screen Shot 2021-01-18 at 1.18.44 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@kadishap 

Yes, is possible yo above look at

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

MS-WEB-DESIGNER
Shopify Partner
3012 181 484

This is an accepted solution.

Dear @kadishap 

Hope the following suggestions will help you

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  •  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.

  • Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

Laura400co
Tourist
8 0 4

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

KetanKumar
Shopify Partner
36839 3635 11972

@Laura400co 

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laura400co
Tourist
8 0 4
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?
Laura400co
Tourist
8 0 4

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?

 

KetanKumar
Shopify Partner
36839 3635 11972

@Laura400co 

can you please provide image how do you have like image?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing