How to adjust footer spacing and button hover effect in Prestige theme?

Store Design
1

Hi!

I disabled some sections in the footer and now the elements left look funny.

I would like to move one to the left and one to the right, reduce the footer height too.

https://prnt.sc/w6i315

Also, any idea how I can change the hover effect on the subscribe button? It looks like this https://prnt.sc/w6i3ie.

Thank you!

2

Maybe you change that option from the theme customization option so go there and check the button hover color.

or you have to add CSS for that.
if you not a developer then I will suggest hire expert Me or else

3

@AnkShop

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

4

Hi!

It’s https://fc-dorsum.myshopify.com/, thank you!

5

@AnkShop

Thanks for store url

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file.
.Footer{padding: 20px 0 0px 0;}
.Footer__Inner + .Footer__Aside {margin-top: 0;} 
.Footer__Block {margin-bottom: 0;}
6

Thank you so much! This worked!

7

@KetanKumar Do you also happen to know how to move elements and change copyright text to white at all times? Thank you!

8

@AnkShop

Thanks for your feedback and support.

9

@AnkShop

Yes, please this code

.Footer__Copyright a {
    color: #fff;
}
10

@KetanKumar Thank you, this worked too!

Now I just need to figure out how to add space between these two elements https://prnt.sc/w7573v. Is this more complicated?

11

@AnkShop

Yes, try this code

@media screen and (min-width: 1140px) {
.Footer--center .Footer__Inner {
    justify-content: space-evenly;
} 
}
12

@KetanKumar thank you! It worked https://prnt.sc/w75qah, but I would like to add more space between them, any thoughts on how I can get them more on the right and left of the footer? Thank you!

13

@AnkShop

Yes, please remove the first one and add this

@media screen and (min-width: 1140px) {
.Footer--center .Footer__Inner {
    justify-content: space-between;
}
}
14

@KetanKumar perfect, thank you!

Can this button be moved though? https://prnt.sc/w75ut9

And made similar with the email address input field - white font, white frame, no hover effect?

Thank you!

15

@AnkShop

yes, try this

@media screen and (min-width: 1140px) {
.Footer__Content + .Footer__Newsletter { display: flex; align-items: center; margin-bottom: 18px;}
.Footer__Inner .Form__Submit { margin-top: 0; margin-left: 15px;}
}
16

@KetanKumar yeah, that one does the trick https://prnt.sc/w769te. But it did shorten the email input field and the Subscribe button is still black, not so visible. Would like to just make it white font, white frame, no hover. Any thoughts? Thank you!

17

@AnkShop

Yes, please add this code also

@media screen and (min-width: 1140px) {
.Footer__Block--newsletter {
    flex-basis: 570px;
}
.Footer__Inner .Form__Submit {
    color: #fff !important;
    border-color: #fff;
}
.Footer__Inner .Form__Submit::before {
    background: transparent;
}
}
18

This is perfect @KetanKumar thank you!!!

19

@AnkShop

Thanks for your feedback and support.

20

HI @KetanKumar ! Following up on footer, how do we change the entire footer size to Font size 12px? I attempted to add:

.Footer p {
 font-size: 12px;
}

But it only changed the font size of words under “ABOUT”, but the others including newsletter etc stays the same.

I have a few questions to ask:

  1. How do I reduce the font size of entire page? Including a. Side bar, b. Footer, c. Placeholders in Search bars, d. Icons for checkout cart?

  2. How do I remove the border of newsletter “Enter your email address” and change it to an underline?

  3. How do I change the “Join” button below the form input, to the right side of form input?

Eg.

manjastudio_0-1624456242429.png

Details for you: My website URL is manja-studio.myshopify.com

Thank you!