A user’s desktop footer became vertical after applying CSS changes to center the mobile footer in the Dawn theme. They needed to restore the horizontal layout.
Solution provided:
display: flex, gap, justify-content: center) successfully converted the footer back to horizontal orientationFollow-up issue:
Another user implementing the same solution noticed the first menu item (“Blog”) appears slightly higher than other items, creating misalignment. They shared screenshots showing both the CSS implementation and the visual misalignment.
Current status:
The helper requested a preview link to the store to diagnose the alignment issue, as screenshots alone are insufficient for testing and writing corrective code. The discussion remains open pending access to the preview environment.
Hi there,
My desktop footer, which was initially horizontal, has now become vertical after I applied changes to fix the mobile footer. I previously centred my mobile footer which as a result changed my horizontal desktop footer to vertical now, I’m looking for guidance on how to convert the desktop footer back to a horizontal orientation. I’m using the dawn theme. My website: https://imporify.com/
Thanks in advance!
Hey @Imporify ,
Please paste this in the Custom CSS box in the Theme Customizer → Settings
ul.footer-block__details-content.list-unstyled {
display: flex;
gap: 20px;
justify-content: center;
}
@media only screen and (max-width: 768px) {
ul.footer-block__details-content.list-unstyled {
flex-direction: column;
gap: 0;
}
}
You should find it here,
Perfect it worked - thanks! Also, hopefully you can see on the website - notice how the “subscribe to our emails” text is pushed into the centre of the footer. I don’t know why that occurred, how can I fix it and push it back?
Hey @Imporify ,
Add this along with the code above,
.footer-block__newsletter h2.footer-block__heading.inline-richtext {
text-align: left;
}
All done. Appreciate it thanks!
I’ve been searching everywhere for this solution and hadn’t found it until this post. Thank you @ThePrimeWeb ! You’re a huge help!
Quick follow up question: It’s hard to see, but for some reason the first menu item (“Blog”) is slightly higher than the other menu items. They aren’t in a perfectly straight line. I don’t know what could be causing this, but is there a way to fix it?
Attached is a screenshot of the code I copied/pasted into the settings, as well as the menu as it appears on the front end.
Thanks,
Carissa
Hey @cmag ,
Do you mind sharing the link to your store?
@ThePrimeWeb it isn’t live yet, only in preview mode. Is there something you’re looking for that I can screenshot for you?
You can share the preview link @cmag ,
I can’t do anything with a screenshot, I need to go to the store, write some code and test it out.
