Centre align image block in footer section - Dawn

[Sumi]

Good day,

I require assistance please:

1. Please to center align an image block that I want to insert in the footer of the Dawn theme.

I want to add the supported payment method image in the image block (but when I add the image it moves the image to the right and all other info such as browse our store and related footer menu items to the left) . 

This is what the footer currently looks like in desktop view.

I want the image to be added between the social media icons and the payment methods icons.

2. One more thing please - on the mobile view, the "Browse Our Store" menu items are left aligned - I want to center align only this menu on the mobile view please.

Thanks in advance

[rajweb]

Hey @Sumi ,

To achieve the layout changes you want in the Dawn theme footer, you can use custom CSS to center-align the "Browse Our Store" menu items on mobile and adjust the image block positioning. Here’s how you can do it:

1. Add the Image Block:

-Go to your Dawn theme editor in Shopify.

-Navigate to the footer section and add an image block where you want the supported payment method image to appear.

-Upload your image for the payment methods.

2. Custom CSS for Center Alignment:

In your theme’s CSS file (typically base.css or theme.css), add the following custom CSS to center-align the "Browse Our Store" menu items on mobile:

/* Center-align footer menu on mobile */
@media (max-width: 767px) {
  .footer__menu {
    text-align: center;
  }
}

Next, to position the new image block in between the social media icons and payment method icons, you may need to modify the structure of the footer in the theme files. However, you can try adjusting it with CSS alone. Add this code to make sure the image is centered and does not push other items aside:

/* Center-align the image block in the footer */
.footer__image-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
}

If the footer_image-block class does not apply directly (or if there’s another class for the image block), inspect the element in your browser’s developer tools to find the correct class name and replace  .footer_image-block with that.

To ensure that other footer items like "Browse Our Store" and social icons are unaffected by the image, make sure they have their own flex container, or use additional CSS as follows:

/* Keep footer items in place while centering the new image */
.footer__menu, .footer__social-icons, .footer__payment-icons {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

This CSS should help keep the "Browse Our Store" centered on mobile and position your new image block correctly on desktop. If there’s any specific structural change needed, let me know, and I can guide you further!

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[DaisyVo]

Hi @Sumi 

Can you share with me your store password?

Best,

Daisy

[namphan]

Hi @Sumi,

Please send the website link, I will check it for you

[DaisyVo]

Hi @Sumi 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 768px){
.footer__content-top.page-width > .footer__blocks-wrapper {
    flex-direction: column !important;
    align-items: center;
}
.footer__content-top.page-width > .footer__blocks-wrapper > div:nth-child(1) {
    width: 100%;
}
.footer__content-top.page-width > .footer__blocks-wrapper > div:nth-child(1) h2.footer-block__heading {
    text-align: center;
}
.footer__content-top.page-width > .footer__blocks-wrapper > div:nth-child(1) ul.footer-block__details-content {
    display: flex !important;
    justify-content: space-evenly;
}
}

Here is the result: https://prnt.sc/-BEkgN-u9DWX

I hope this helps

Best,

Daisy

[Sumi]

Hello Daisy,

Thank you for your solution.

Please - can the Payfast image be below the social media icons and the payment icons - your screenshot currently shows above the social media icons)... Thank you.

Also - is there any way to reduce the spacing in the footer between the social media icons, the payfast image and the payment icons... if possible?

Many thanks