Solved

How to move the email signup box up in footer and align the links to the left (Dawn 11.0.0)

DRAWandCARE
Pathfinder
116 0 15

Hello there!

I'm currently using the Dawn 11.0.0 theme for my website, and I'm wondering how I can move the email signup box up and align the links to the left.

The first screenshot shows my website footer, and the second one represents the example I'm aiming to achieve on my website.

I've attempted several solutions from various discussions here, but unfortunately, none of them have worked with my version of the Dawn theme.

Would be very grateful for any assistance you can provide!

https://www.drawandcare.com/
The password: DRAW5848draw3729lvivCaRe!123

My footer:
scrt.png
Example:

image_2023-10-04_03-40-52.png

 

 

 

Accepted Solutions (2)

websensepro
Shopify Partner
1011 139 147

This is an accepted solution.

Hi, @DRAWandCARE.

 

Follow these steps:

Goto > Online store  > Theme > Customize > Going to footer section > add text  block > 

 

websensepro_0-1696409975740.png

 

Remove Email sign up heading :

websensepro_1-1696410055996.png

 

And save Now.

And goto next steps:

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

footer.footer.color-background-1.gradient.section-sections--20531184927031__footer-padding .page-width {
    max-width: 90%;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in p {
    padding-right: 30px;
}

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    float: right;
}

form#ContactFooter {
    margin: -90px 43px;
    max-width: 28rem;
}

.locale-selectors__container {
    display: none;
}

 

Result:

websensepro_2-1696410649956.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

websensepro
Shopify Partner
1011 139 147

This is an accepted solution.

Hello, Please add this code, I hope these is helpful for you.

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

@media (min-width:320px) and (max-width:767px) {

form#ContactFooter {
    margin: 0 0 !important;
}

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    float: none !important;
    margin-top: -30px !important;
}

}

 

Result:

websensepro_0-1696489741468.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 6 (6)

laddisahsi
Shopify Partner
358 36 37

Hi @DRAWandCARE 

You have to change the HTML structure for this, Have add css accordingly.

have to contact with shopify developer.

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

websensepro
Shopify Partner
1011 139 147

This is an accepted solution.

Hi, @DRAWandCARE.

 

Follow these steps:

Goto > Online store  > Theme > Customize > Going to footer section > add text  block > 

 

websensepro_0-1696409975740.png

 

Remove Email sign up heading :

websensepro_1-1696410055996.png

 

And save Now.

And goto next steps:

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

footer.footer.color-background-1.gradient.section-sections--20531184927031__footer-padding .page-width {
    max-width: 90%;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in p {
    padding-right: 30px;
}

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    float: right;
}

form#ContactFooter {
    margin: -90px 43px;
    max-width: 28rem;
}

.locale-selectors__container {
    display: none;
}

 

Result:

websensepro_2-1696410649956.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
DRAWandCARE
Pathfinder
116 0 15

Hello! Thank you so much for your help, I changed a couple of numbers and it worked!

However, is there any solution to put it in the center and a little higher in the mobile version? Thank you!

Screenshot_20231005_002506_Chrome.jpg

 




websensepro
Shopify Partner
1011 139 147

This is an accepted solution.

Hello, Please add this code, I hope these is helpful for you.

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

@media (min-width:320px) and (max-width:767px) {

form#ContactFooter {
    margin: 0 0 !important;
}

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    float: none !important;
    margin-top: -30px !important;
}

}

 

Result:

websensepro_0-1696489741468.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
DRAWandCARE
Pathfinder
116 0 15

Thank you so much for your help! It worked great!

collins276
Trailblazer
199 1 28

I followed your steps but nothing change, can you help me out? My url: https://189ee3-2.myshopify.com/pages/faq-1

Thank you,