Solved

Footer with Brand Information not staying centred on desktop

LukeMac
Excursionist
22 0 4

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. Screenshot 2024-05-27 at 10.16.58.png

Accepted Solution (1)
techlyser_web
Shopify Partner
1689 309 326

This is an 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>

techlyser_web_0-1716806796006.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 15 (15)

ZestardTech
Shopify Expert
5618 1022 1348

Hi @LukeMac 

 

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
LukeMac
Excursionist
22 0 4

https://itscalledfragrances.com/

 

Code: auskao

 

Thanks.

ZestardTech
Shopify Expert
5618 1022 1348

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;
}

 

ZestardTech_0-1716802769377.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
LukeMac
Excursionist
22 0 4

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):

Screenshot 2024-05-27 at 12.27.12.png

 

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

techlyser_web
Shopify Partner
1689 309 326

Hello @LukeMac 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

techlyser_web
Shopify Partner
1689 309 326

you want like this @LukeMac 

techlyser_web_0-1716802566154.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
LukeMac
Excursionist
22 0 4

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:

Screenshot 2024-05-27 at 12.27.12.png

 

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

techlyser_web
Shopify Partner
1689 309 326

This is an 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>

techlyser_web_0-1716806796006.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
LukeMac
Excursionist
22 0 4

Worked perfectly. Thank you very much.

LukeMac
Excursionist
22 0 4

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: 

Screenshot 2024-05-31 at 13.05.39.png

 

Please help.

 

Thanks in advance. 

LukeMac
Excursionist
22 0 4

All sorted, thanks for the help.

techlyser_web
Shopify Partner
1689 309 326

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
LukeMac
Excursionist
22 0 4

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:

Screenshot 2024-06-01 at 14.12.17.png

techlyser_web
Shopify Partner
1689 309 326

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
LukeMac
Excursionist
22 0 4

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