How can I relocate the newsletter to the footer's right side?

Store Design
, ,
1

Hi Shopify community

I’ve searched far and wide but with no real luck.

I need to move the newsletter from the bottom to the right side of the footer in column 3. Illustrated below.

placeholderfooter.png
placeholderfooter.png997×254 48.2 KB

https://cardenau1.myshopify.com/

PW: aotatu

I hope you can give me a hand,

Thanks a bunch

Best regards

Victor

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media (min-width: 768px) {
.footer-block--newsletter {
width: 50%;
margin: 0;
align-items: flex-start;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
width: 50%;
}
.footer__content-top.page-width {
display: flex;
flex-wrap: wrap;
}
}

ZestardTech_0-1670237296217.png
ZestardTech_0-1670237296217.png1804×790 134 KB

1 Like
3

Hi @VictorCardenau ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets → section-footer.css

@media screen and (min-width: 750px) {

.footer-block__newsletter {

    display: inline-block !important;

    position: absolute !important;

    bottom: 73% !important;

    left: 70% !important;

}

}

.footer__content-top {

    position: relative !important;

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
4

Hi ZestardTech

Thank you,

I did the changes, but it does not seem to work. I copied it in base.css, right below the last line.

What could I be doing wrong?

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the top of the file:
@media screen and (min-width: 768px) {
    .footer-block--newsletter {
      width: 50%;
      margin: 0 !important;
      align-items: flex-start !important;
    }
    .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
      width: 50%;
    }
    .footer__content-top.page-width {
      display: flex;
      flex-wrap: wrap;
    }
}

ZestardTech_0-1670241563195.png
ZestardTech_0-1670241563195.png1904×926 70.4 KB

7 Likes
6

Thank you Zestard!

1 Like
7

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

1 Like
8

It works for me too!

1 Like
9

Hello ZestardTech,

This solution does also work for me. However, how can I modify the code to move the newsletter subscription to the first column (All the way to the left of the footer). I hope you can help. Thank you very much.

Best regards,
Anna from Barí