I’m trying to center the content in my footer to look like this:
I’m working on this site: https://gelt-glow.myshopify.com/
This is the password: tughao
How do I do this?
Topic summary
Goal: center all footer content both vertically and horizontally to match a reference screenshot on a Shopify store.
Solution provided: add custom CSS in the theme’s main CSS file (base.css/style.css/theme.css). The rules use a desktop-only media query (min-width: 749px) and Flexbox on footer grid items to vertically center content, plus text-align: center on headings and details. A result screenshot confirmed the layout worked as intended.
Outcome: the centering fix was successful and acknowledged.
New request: guidance to add a decorative image at the top of the footer (a “stars” banner) was asked next. No implementation steps or solution for the image have been provided yet.
Notes: screenshots and the image are central to understanding the desired design and the achieved result. The discussion currently remains open for the footer image addition.
1 Like
TRy this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 749px){
.footer-block.grid__item {
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-block__details-content, h2.footer-block__heading.inline-richtext {
text-align: center;
}
}
- And Save.
- Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
1 Like
