Hello,
After updating my theme some of my custom code got messed up and im having trouble fixing this one issue on my own. Attached is a photo of my current footer
I would prefer if I could orient the policies and trademark to look like this
Any help is greatly appreciated!
website: https://qz26pn-cv.myshopify.com/ password: bagono
My apologies, had to publish the new theme. You guys are too quick!
Please add this code to Custom CSS in theme settings
@media (min-width: 750px) {
.footer__copyright {
display: flex;
align-items: center;
}
}
.policies { padding-left: 0px !important; }
Dan from Ryviu: Product Reviews App
attached is the result that I got with that code. It may be worth mentioning that I am using shrine pro theme rather than a standard shopify theme. Unsure if that changes anything with this.
Hello @GoombaGrows ,
Here are the steps to apply the necessary changes in your Shopify store:
In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
Then locate Assets > base.css (or your main CSS file) and paste the following code at the bottom of the file:
.footer__copyright.caption {
display: flex;
align-items: center;
}
.footer__copyright {
margin-top: 0;
}
.footer__content-bottom.animate-item.animate-item--child {
display: flex;
flex-direction: row-reverse;
}
ul.footer-policies {
padding: 0;
}
This will help align the footer content (payment icons, copyright text, and policy links) properly in the Shrine Pro theme.
Let us know if you need further assistance!
@GoombaGrows
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag
<style>
@media screen and (min-width: 1024px) {
.footer__content-bottom {
display: flex;
flex-flow: row-reverse;
}
.footer__copyright.caption{
display: flex;
}
.footer-policies {
padding-left: 0 !important;
}
}
</style>
Resilt:
Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.
Please add this code to base.css
@media screen and (min-width: 990px) {
.footer__content-bottom.animate-item.animate-item–child {
display: flex;
flex-direction: row-reverse;
}
.footer__copyright.caption {
display: flex;
}
}
This did it! Thank you so much. One last thing if its not asking to much.
attached is a screenshot of how it shows which is perfect but is there a way to align it with the rest of the footer?
Hi, @GoombaGrows
Sure. You need to add the css code below.
<style>
@media screen and (min-width: 1024px) {
.animate-section.animate--shown .animate-item.animate-item--child {
max-width: var(--page-width);
margin: 0 auto;
padding: 1rem 5rem !important;
}
.footer__content-bottom-wrapper {
padding: 0 !important;
}
.footer__localization:empty+.footer__column--info {
align-items: flex-end !important;
}
.footer__payment, .footer__copyright {
margin-top: 0 !important;
}
.footer__content-bottom-wrapper--center {
padding: 0 !important;
justify-content: flex-start !important;
align-items: center;
}
}
</style>
Result:
Thank you so much! This worked perfectly 
