Footer with Brand Information not staying centred on desktop

[LukeMac]

My footer does not want to stay centred on desktop when I include my logo in as my brand information in the footer. It works (stays centred) on mobile (and I have code that centres it), but it goes out of line on the desktop version of my site. 

See the image to understand what I mean. Please help me fix this. 

[ZestardTech]

Hi @LukeMac 

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[LukeMac]

https://itscalledfragrances.com/

Code: auskao

Thanks.

[ZestardTech]

Hi @LukeMac 

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:

.footer-block.grid__item.footer-block--menu {
text-align: start;
margin-right: 100px;
}

[LukeMac]

Hi Zestard, that did not work or it did work, but its not what I want. 

I would like it to look like this image, except with the logo above "SUPPORT" (for desktop):

My code for mobile only works as I want it to work.

[niraj_patel]

Hello @LukeMac 
Can you share store URL?

[niraj_patel]

you want like this @LukeMac 

[LukeMac]

For mobile i want it like that, and it works with the code thatI have for mobile. 

For desktop I would like it like this, with my logo above "SUPPORT" please:

When I add the brand info logo, it changes the "SUPPORT" links to a vertical list and not a horizontal one (on desktop).

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 768px){
 .grid--4-col-tablet .grid__item {
     width: calc(50% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important;
  }
  .footer-block.grid__item.footer-block--menu {
      margin-right: 6px !important;
  }
  .footer-block__details-content {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .footer__content-top .grid {
      row-gap: 2rem !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[LukeMac]

Worked perfectly. Thank you very much.

[LukeMac]

Hi, Techlyser can you please help me again. I am having trouble with my footer again. After adding my social media icons to my footer, the information has gone out of alignment again, and the social media icons are appearing twice. I would like everything to be centred as you previously did, and I only want the social icons under my logo, not by the email block. 

Please see the follwing image: 

Please help.

Thanks in advance. 

[LukeMac]

All sorted, thanks for the help.

[niraj_patel]

Hello @LukeMac 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.footer-block--newsletter ul {
display: none !important;
}
@media screen and (min-with: 750px){
 .footer-block__newsletter:not(:only-child) {
     text-align: center !important;
  }
  .footer-block__newsletter:not(:only-child) .footer__newsletter {
      justify-content: center !important;
      margin: 0 auto !important;
      max-width: 100% !important;
      align-items: center !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[LukeMac]

Thanks, it took away the second set of social icons, but the email block is still not centred. Please can you help with this as well:

See image:

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-with: 750px){
 .newsletter-form {
    align-items: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
 }
 .footer-block__newsletter:not(:only-child) {
     text-align: center !important;
     margin-right: auto !important;
  }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[LukeMac]

Thanks, I've pasted this code in but its still not working.