Shopify themes, liquid, logos, and UX
Hi Team,
https://birdhavencreations.com/
I have three queries -
1. I am trying to move the "Email Signup" form to the same level as other Footer Menu instead of showing the default bottom of the Quicklinks
2. I want the Social Media Icons to be right below Email Signup so that overall Footer menu looks clean.
3. The current "SUPPORT" and "ABOUT" footer menu doesn't look hortizontally spaced compared to the first text box. How to move these two columns to slightly right ?
Solved! Go to the solution
This is an accepted solution.
It is like this?
If its, try this one.
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column;
margin-top: 0px;
width: 35%;
}
.footer-block__newsletter {
margin-left: auto;
margin-right: 0px !important;
}
ul.footer__list-social.list-unstyled.list-social {
align-self: flex-start;
margin-bottom: 50px;
}
.footer__content-top.page-width {
display: flex;
}
.footer-block__newsletter {
width: max-content;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
gap: 66px;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
It is like this?
If its, try this one.
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column;
margin-top: 0px;
width: 35%;
}
.footer-block__newsletter {
margin-left: auto;
margin-right: 0px !important;
}
ul.footer__list-social.list-unstyled.list-social {
align-self: flex-start;
margin-bottom: 50px;
}
.footer__content-top.page-width {
display: flex;
}
.footer-block__newsletter {
width: max-content;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
gap: 66px;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Nice. This works. Just a small follow-on request
Can I have 5 lines in the first column by increasing the column width, then the second and third columns can have slightly lower column width?
@Made4uo-Ribe I just noticed that your solution works for Desktop but gets distorted badly on mobile. I want it to be the original configuration in mobile where each of the columns is stacked below the other
Yes, cause that is only for desktop view. To prevent this code showing on mobile add this one.
Same Instruction:
@media only screen and (min-width:749px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column;
margin-top: 0px;
width: 35%;
}
.footer-block__newsletter {
margin-left: auto;
margin-right: 0px !important;
}
ul.footer__list-social.list-unstyled.list-social {
align-self: flex-start;
margin-bottom: 50px;
}
.footer__content-top.page-width {
display: flex;
}
.footer-block__newsletter {
width: max-content;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
gap: 66px;
}
}
And Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hello there
I have inserted this code to my Crave theme and it worked. Thanks so much!
The only problem I would have right now is that the Social Media Icons are not right below Email Signup. Also would it be any way to extend the first column I have in the footer so the content can fit better?
If possible, I can leave here my website so you can have an idea of what I was meaning.
www.winningnaturals.com
Thanks so much
Nadylina
Welcome, Good to know it help in your store.
Do you mean like this?
If it is try this one.
.footer__content-top.page-width {
justify-content: space-between;
}
@media only screen and (min-width: 749px){
ul.footer__list-social.list-unstyled.list-social {
align-self: end;
}
.footer-block--newsletter {
justify-content: flex-start;
}
.footer-block__newsletter {
flex-grow: unset;
}
}
Thanks so much, appreciate your help.
Unfortunately it didn't work at all, I replaced your code with the old one (you suggested before) and nothing changed at all. The Social Media Icons were not below Email Signup and the column for quick links which I would like to extend so the links can fit in one row, didn't change at all.
This worked perfectly for me thank you! My only question is - is there anyway on mobile, for the email capture to show ABOVE the other menu links? So on desktop it's beside them (which is great), but on mobile, the links are displayed first and the email capture is last. Any help much appreciated!
Can I take a look in your store? I'll just want to check if we can change it. Thanks!
Oh, sorry. For checking the code in store the Image wont help us. Reading the code would help to understand how can I exchange or change the position. You can on drop message on my mail box Thanks!
No probs - here's the link (https://597ed6-6.myshopify.com/) and I'll PM you the password. Happy for you to post solution on here in case anyone else has the same query! Thanks!
I literally can't PM you - not sure why! I've tried several times. Never mind anyway, someone will probably post the solution somewhere.
Thanks for the info, I did this.
Check this code.
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 (max-width: 749px){
.footer__content-top.page-width {
display: flex;
flex-direction: column-reverse;
gap: 25px;
}
}
And save.
Q: Do you like to align the newsletter to the center? or you like the links also in the center?
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
You're a star! That works brilliantly. The alignment you've used looks good, but if I did want to align the links in the centre or email capture to the right, is there a straightforward code tweak for that?
If you like to add some buttons on to shown on the customize theme. That needs a schema and need to edit some code in the liqud.
I went to check it again cause i didnt check to align from the code. But it giving me wrong password.
Hi @Made4uo-Ribe, I tried using this code for my store and it worked for desktop view. However in mobile view, the newsletter box is too large and cut off at the right and the social media icons are too far below the newsletter. Is there a way to modify the code you provided so it looks the same in desktop and mobile?
It would not be the same result cause the design is not for your store, you may have different codes. And store design would you mind to share your store URL? Thanks!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024