Re: Convert my vertical footer to horizontal on desktop dawn theme

Solved

Convert my vertical footer to horizontal on desktop dawn theme

Imporify
Tourist
12 0 1

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!

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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, 

ThePrimeWeb_0-1705929499007.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @Imporify,

Add this along with the code above, 

.footer-block__newsletter h2.footer-block__heading.inline-richtext {
    text-align: left;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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, 

ThePrimeWeb_0-1705929499007.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Imporify
Tourist
12 0 1

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?

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @Imporify,

Add this along with the code above, 

.footer-block__newsletter h2.footer-block__heading.inline-richtext {
    text-align: left;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Imporify
Tourist
12 0 1

All done. Appreciate it thanks!

cmag
Tourist
7 0 4

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

 

Screenshot 2024-03-28 at 2.15.46 PM.pngScreenshot 2024-03-28 at 2.05.00 PM.png

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @cmag,

 

Do you mind sharing the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
cmag
Tourist
7 0 4

@ThePrimeWeb it isn't live yet, only in preview mode. Is there something you're looking for that I can screenshot for you?

ThePrimeWeb
Shopify Partner
2138 615 493

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.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!