Solved

Move newsletter section to the left in footer

flammagreg
Trailblazer
235 0 38

Hi guys,

 

Website: seraneeva.com

 

How can I move the newsletter signup section more to the left in the footer and make it so that the three sections (client service, the company, and newsletter) have the same padding between them. Pic attached for what I'm looking for.

Screenshot 2024-05-29 at 4.24.32 PM.png

 

Accepted Solutions (2)
PageFly-Noah
Shopify Partner
1251 221 254

This is an accepted solution.

Thank you please add again code here:

<style>
  @media screen and (min-width: 768px){
    .footer-main .grid__item:nth-child(3) {
  width: 25% !important;
}

.footer-main .grid__item:nth-child(4) {
  width: 25% !important;
}

.footer-main .grid__item:nth-child(5) {
  width: 50% !important;
}
}


</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Noah
Shopify Partner
1251 221 254

This is an accepted solution.

Oke, Please add code here, I think it will fix it:

<style>

.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >a {
padding: 0 !important;
min-width: fit-content;
margin: 0 9.23px;
} 

@media screen and (min-width: 767px){
   .site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4){
        width: 21.5px !important;
    display: flex !important;
    justify-content: center !important;
}
   .site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4) .site-nav--mobile{
        width: 21.5px !important;
   
}
.site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4) .site-nav--mobile button{
            padding-left: 0px !important;
    padding-right: 0px !important;
    width: 21.5px !important;
    min-width: 21.5px !important;
    margin-left: 9.31px !important;

    margin-right: 9.31px !important;
   
}

.site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4) .site-nav--mobile svg{
            cursor: pointer !important;
   
}
}

</style>

Thank you.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 15 (15)

rajimulislamjoy
Shopify Partner
186 16 22

Achieve this, you'll need to edit the CSS styles of your footer elements. Specifically, adjust the margins or padding of the newsletter signup section to move it more to the left, and ensure consistent padding between the three sections.

Please don't forget to Like & Mark Solution to the post that helped you. Thanks!
If you'd like to support me, you can Buy Me a Coffee
Need a Shopify Designer or Dropshipping Expert ?
Hire us at WhatsApp! For Shopify Design | Shopify Customize | Dropshipping

PageFly-Noah
Shopify Partner
1251 221 254

This is Noah from PageFly - Shopify Page Builder App

 

Hi @flammagreg Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
  @media screen and (min-width: 768px){
    footer .grid__item:nth-child(1){
       width: 25% !important;
    }
   footer .grid__item:nth-child(2){
       width: 25% !important;
    }
   footer .grid__item:nth-child(3){
     width: 50% !important; 
    }
  }


</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

flammagreg
Trailblazer
235 0 38

That didn't work. Anything else?

Screenshot 2024-05-29 at 11.09.54 PM.png

PageFly-Noah
Shopify Partner
1251 221 254

Hi , Please add again code here:

<style>
  @media screen and (min-width: 768px){
    .footer-main .grid__item:nth-child(1) {
  width: 25% !important;
}

.footer-main .grid__item:nth-child(2) {
  width: 25% !important;
}

.footer-main .grid__item:nth-child(3) {
  width: 50% !important;
}
}


</style>

And it still issue , Can you save the code so I can check it again? In the past, many cases used this method. If it's wrong, I need to check again.
Thank you.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

flammagreg
Trailblazer
235 0 38

I did it again and it showed up the same. I left the code

PageFly-Noah
Shopify Partner
1251 221 254

This is an accepted solution.

Thank you please add again code here:

<style>
  @media screen and (min-width: 768px){
    .footer-main .grid__item:nth-child(3) {
  width: 25% !important;
}

.footer-main .grid__item:nth-child(4) {
  width: 25% !important;
}

.footer-main .grid__item:nth-child(5) {
  width: 50% !important;
}
}


</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

flammagreg
Trailblazer
235 0 38

Thank you!!

PageFly-Noah
Shopify Partner
1251 221 254

Thank you ! Have a nice day 😉 !

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

flammagreg
Trailblazer
235 0 38

One more question for. I added code to make the icons in the header only be able to be clickable when a user is actually hovering over them. It worked all icons, but the menu icon. Do you know how to do this for the menu icon too?? I'm thinking I just need to add something that addresses the menu icon to the code below, but I'm not sure what that is.

 

Code that worked for the other 3 icons:

 

<style>
.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >a,
.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >button {
padding: 0 !important;
min-width: fit-content;
margin: 0 9.23px;
}
</style>

PageFly-Noah
Shopify Partner
1251 221 254

Oke, Let me check !

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Shopify Partner
1251 221 254

Hi, I have check this code have worked for 4 icon, You can see image here:

PageFlyNoah_0-1717041313084.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

flammagreg
Trailblazer
235 0 38

Do you know why it doesn't work? When hovering menu as opposed to the other icons, there is definitely space on the left and right of the icon that is clickable.

PageFly-Noah
Shopify Partner
1251 221 254

You can try edit code here:

<style>
.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >a {
padding: 0 !important;
min-width: fit-content;
margin: 0 9.23px;
}

.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >button {
    padding: 0px !important;
    min-width: fit-content !important;
    margin: 0 9.23px !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

flammagreg
Trailblazer
235 0 38

Still the same

PageFly-Noah
Shopify Partner
1251 221 254

This is an accepted solution.

Oke, Please add code here, I think it will fix it:

<style>

.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >a {
padding: 0 !important;
min-width: fit-content;
margin: 0 9.23px;
} 

@media screen and (min-width: 767px){
   .site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4){
        width: 21.5px !important;
    display: flex !important;
    justify-content: center !important;
}
   .site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4) .site-nav--mobile{
        width: 21.5px !important;
   
}
.site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4) .site-nav--mobile button{
            padding-left: 0px !important;
    padding-right: 0px !important;
    width: 21.5px !important;
    min-width: 21.5px !important;
    margin-left: 9.31px !important;

    margin-right: 9.31px !important;
   
}

.site-header .site-header__wrapper .site-header__wrapper__right > ul > li:nth-child(4) .site-nav--mobile svg{
            cursor: pointer !important;
   
}
}

</style>

Thank you.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.