Move newsletter section to the left in footer

[flammagreg]

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.

[PageFly-Noah · 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>

[rajimulislamjoy]

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.

[PageFly-Noah]

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

[flammagreg]

That didn't work. Anything else?

[PageFly-Noah]

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.

[flammagreg]

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

[PageFly-Noah · 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>

[flammagreg]

Thank you!!

[PageFly-Noah]

Thank you ! Have a nice day 😉 !

[flammagreg]

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]

Oke, Let me check !

[PageFly-Noah]

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

[flammagreg]

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]

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>

[flammagreg]

Still the same

[PageFly-Noah · 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.