Debut Theme Footer - Center Quick Links and Newsletter

Store Design
1

Hi All

A couple of changes I wanted to make to my footer.

  1. I currently have quick links and newsletter on my footer, I’d like to center both, and have them one above the other instead of side by side. Basically if I remove the newsletter, the quick links defaults to look like what I want it to look like, same with if I only have newsletter and not quicklinks. But when I have them both, they end up side by side instead of one above the other.

  2. There is also a purple line that I want removed, not sure how to remove it, I assume its a border or something.

  3. (My screenshots don’t reflect this point) But I’d like to be able to change the font colour of the quick links and news letter headings, and a different colour for the actual quicklinks.

What it looks like now:

Footer Before.jpg
Footer Before.jpg1860×396 38 KB

What I’d like it to look like:

Footer After.jpg
Footer After.jpg1835×480 41.3 KB

I’ve looked at a lot of other posts on but most of them have asked for something slightly different to what I’d like and I’m not savvy enough with code to figure it out myself. Any help is much appreciated.

Thanks

https://cutieluxe.com/ Password cute1

1 Like
2

@Lynny

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.site-footer__content {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.site-footer__item--one-half {
    -webkit-flex: 1 1 100%;
    -moz-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    text-align: center;
}
.site-footer__item:first-of-type {
    padding-left: 0;
    order: 2;
}
3

Hi Ketan

That worked to center both of them, however the quick links heading is slightly to the left of the newsletter heading. Is there a way to make them both more center aligned just so it looks nicer?

Footer After 2.jpg
Footer After 2.jpg1536×474 43.2 KB

Also, do you know how to remove the purple line towards the bottom of the footer?

Thanks

1 Like
4

@Lynny

Yes, please add this code

hr.site-footer__hr {
    display: none;
}
.site-footer__item:first-of-type {
padding-right: 0;
}
5

Hi @KetanKumar Is there a way to remove the purple line from the mobile version as well?

Thanks

6

This is not working for my website. Any other suggestions.
www.crayonsreadytoeat.com

Theme Debut
Thank You
Frank