Move password button

Store Design
,
1

I would like to move the enter using password to the body of the page under the image banner

peakclo_0-1736342812409.png
peakclo_0-1736342812409.png2196×1380 149 KB

www.peakclo.com

2

@peakclo it can be done using css but it can look bit weird on small screens in that case, I recommend to edit password.liquid file and get banner code under the banner, that would show it perfectly on all the screens

3

Thank you for the inf, would you be able to show me where the code is in the liquid file

4

Hello, @peakclo

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
body {
    position: relative !important;
}

.password-link.link.underlined-link{
    position: absolute;  
    top: 60%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    font-size: 16px !important;  
    color: #fff;  
    background: #000;  
    padding: 10px 20px;  
    border-radius: 5px;  
    text-decoration: none;  
}

.password-link.link.underlined-link:hover {
    color: #000;  
    background: #fff;  
}

Thanks!

5

peakclo_0-1736344710591.png
peakclo_0-1736344710591.png2196×1380 128 KB

This did not work

6

@peakclo it would be in your password.liquid file, check password modal

7

Sorry for that, try this one @peakclo

.newsletter__wrapper>* {
    margin-top: 53px !important;
}
@media (min-width: 769px){
.password-link.link.underlined-link {
    position: absolute;
    top: 602px;
    left: -650px;
    /* transform: translate(-280%, 61rem); */
    font-size: 16px !important;
    color: #fff;
    background: #000000;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    z-index: 9999999999;
}
}
@media (max-width: 768px){
.password-link.link.underlined-link {
    position: absolute;
    top: 384px;
    left: -118px;
    /* transform: translate(-280%, 61rem); */
    font-size: 16px !important;
    color: #fff;
    background: #000000;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    z-index: 9999999999;
}
}

Result

image.png
image.png418×481 35.8 KB

8

It works but is now blocking the email signup section

peakclo_0-1736346332841.png
peakclo_0-1736346332841.png2196×1380 124 KB

9

No worries, add this code

.newsletter__wrapper>* {
    margin-top: 40px !important;
}

Thanks!
If you find my advice helpful please remember to LIKE and accept as SOLUTION.

10

unfortunately the same issue still

11

@peakclo Try this one

.newsletter__wrapper {
    padding-top: 80px !important;
}
12

I have tried multiple options for the padding tx but it does not chnage the position at all. Maybe the code needs changed

13

please try this code in file newsletter-section.css then paste the below code

.newsletter__wrapper>* {
    margin-top: 47px!important;
}
14

sorry, still the same

15

can you please share screen short too of code

16

peakclo_0-1736348637921.png
peakclo_0-1736348637921.png2914×1396 495 KB

17

topnewyork_0-1736348856387.png
topnewyork_0-1736348856387.png1352×546 208 KB

18

This is the one I have been changing, no matter the px number it stays the same