Shopify themes, liquid, logos, and UX
Hi,
I am using prestige theme and i want my footer to look like this.
The links in the footer on my website now are vertical underneath each other, how can i make it horizontal like this?
Also, how can i change the button for the newsletter to be on the right of the bar. And the text for the newsletter to be inside the bar.
Store: arterclo.com
Pass: yaifra
Prestige Theme
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi @Arter
TRy this one.
<style>
@media only screen and (min-width: 700px){
.footer__block-list {
justify-content: center;
flex-direction: column;
column-gap: 0;
gap:2rem;
}
.footer__block--newsletter {
max-width: 100%;
flex-basis: unset;
}
.footer__block.footer__block--newsletter form {
display: flex;
width: 100%;
}
.footer__block.footer__block--newsletter form button.button {
background: white;
color: black;
}
.footer__block.footer__block--newsletter form input {
line-height: normal;
}
.footer__block.footer__block--links {
max-width: 100%;
}
.footer__block.footer__block--links ul.v-stack.gap-2\.5.unstyled-list {
display: flex;
gap: 2rem;
}
}
</style>
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hey @Arter
Share your Store URL and Password if enabled.
Best Regards,
Moeed
Hi, thanks for your reply
Store: arterclo.com
Pass: yaifra
Hi @Arter,
I checked your footer and you are wanting something like this:
Please let me know, I will check it.
Hi Namphan,
Yes that is exactly what i am looking for!
Hi @Arter,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
.footer__block-list {
flex-direction: column;
row-gap: 1rem;
width: 100%;
}
.footer__block--newsletter {
max-width: none;
width: 100%;
flex-basis: auto;
}
.footer__block--newsletter .form {
display: flex;
max-width: 500px;
}
.footer__block--newsletter .form-control {
width: 100%;
}
.footer__block--newsletter .align-self-start {
height: 100%;
}
.footer__block--newsletter .align-self-start .button {
height: 100%;
}
.footer__block--links {
max-width: none;
width: 100%;
}
.footer__block--links ul {
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 700px) {
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
}
This is an accepted solution.
Hi @Arter
TRy this one.
<style>
@media only screen and (min-width: 700px){
.footer__block-list {
justify-content: center;
flex-direction: column;
column-gap: 0;
gap:2rem;
}
.footer__block--newsletter {
max-width: 100%;
flex-basis: unset;
}
.footer__block.footer__block--newsletter form {
display: flex;
width: 100%;
}
.footer__block.footer__block--newsletter form button.button {
background: white;
color: black;
}
.footer__block.footer__block--newsletter form input {
line-height: normal;
}
.footer__block.footer__block--links {
max-width: 100%;
}
.footer__block.footer__block--links ul.v-stack.gap-2\.5.unstyled-list {
display: flex;
gap: 2rem;
}
}
</style>
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024