Hi everyone,
I’m trying to centre an image in my footer (class: footer-block-image). The image sits inside a .footer-block__details-content.footer-block-image container within the standard Shopify footer grid.
I’ve tried centering it using margin: 0 auto;, flexbox (display: flex; justify-content: center;), and targeting the wrapper (.footer-block__image-wrapper), but the image still appears slightly off-centre on desktop.
The menu in the adjacent footer block is right-aligned, which may be affecting layout.
Can you see they are slightly left aligned:
Site: https://overintherover.com/
Hello @marycrichton123
Here is the css which will resolve your footer logo issue.
.footer-block--newsletter.scroll-trigger.animate--slide-in {
width: 33.33%;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col {
width: 66.66%;gap: 0;
}
Please hit Like and Mark it as a Solution if you find our reply helpful.
Hello there,
can you add this code in the end of base.css file.
@media (min-width: 750px) {
.footer__blocks-wrapper {
width: 62% !important;
}
}
Results:
This is perfect thank you.
I think I added code in a while ago to remove the footer image on mobile - and I now can not find this?
How can I put it back in?
You are always welcome.
Also, I see the image already removed from the footer on mobile. Can you mention which image you are referring to.
