How can I adjust form dimensions and realign my password page?

How can I adjust form dimensions and realign my password page?

Thunderzee
Tourist
5 0 3

Hi everyone!

 

I'm trying to make a few adjustments to my password page, but given that I'm not coding expert, it hasn't been working out so well. 

The url is nostalcart.com

 

This is what I'm trying to make the page look like:

FinalCrocEdit.png

 

.

I got ahead of myself and removed the header and footer from the password page by using the following codes (pasted on base.css):

.password-header {
display: none !important;
}
.password__footer  {
display: none !important;
}

  I want to bring back both header and footer - adding the following image centered in the header:

3dgifmaker58819.gif

 

The countdown feature is an app added, the password form was already part of the page, and the email form is an extension of Klaviyo.

 

The page just needs some realigning with the forms. I'm just making sure it looks presentable on both desktop and mobile versions - preventing the user from having to scroll much.

 

The social media icons ideally would have to sit at the bottom of the page - is it possible to add them as such to the footer section? Or is it better to add it to the body of the page?

 

Your help is much appreciated!

 

Cheers!

Reply 1 (1)

Spac-es
Shopify Partner
406 119 153

from section-password.css

 

1º Delete 'margin-top: 10rem;' and change the padding, line 23. The code with the changes would look like this:

 

body .section-template--15373018071119__custom_liquid_w776RD-padding {
    margin-top: 10rem;
    padding: 0!important;
}

 

2º Delete 'padding: 4.5rem 3.2rem;' line 84.

3º Add this code: 'max-width: 450px; padding: 0 24px;' line 18:

 

  .password-form {
    justify-content:center;
    margin-top: 1rem !important;
    max-width: 450px;
    padding: 0 24px;
}

 

 

theme.css or base.css

 

4º Add this code:

 

.needsclick.kl-private-reset-css-Xuajs1 {
   min-height: auto !important;
}

 

 

The page with all the changes would look like this:

PC

Captura.PNG

MOBILEmobile.PNG

I hope you liked it!

 

By the way, I'd like to share an interesting library that I think can help you find social media icons with a style very similar to the one in the photo you attached. Icons - Vercel Design

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!