Tagged: , , , , ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • October 21, 2015 at 11:45 am #522246
    October 21, 2015 at 8:26 pm #522499
    Elliott

    Hey richardelectrix!

    Try adding this to your custom CSS.

    label[for="rememberme"] {
    position: absolute;
    bottom: 30px;
    left: 150px;
}

    Regards,
    Elliott

    October 22, 2015 at 1:44 pm #522934
    richardelectrix

    That fixed the issue with the “Remember Me” clashing with “Login”, but it has messed the rest of the page up alignment wise.

    http://screencast.com/t/DtdjzkZkS

    October 23, 2015 at 12:47 am #523407
    Josue

    Hi!

    Add this to your style.css:

    .woocommerce form.login {
    padding-bottom: 25px !important;
}

    Regarding the lost password text, modify the.lost_password code you already have in your style.css.

    Cheers!
    Josue

    October 23, 2015 at 10:29 am #523570
    richardelectrix

    I have got it all lined up properly again but now the p.lost_password is clashing with the Login button when responsive…

    http://screencast.com/t/xn8WaRXGxxyF

    October 23, 2015 at 10:39 am #523582
    Josue

    Hey!

    Wrap all those codes with this:

    @media only screen and (min-width: 767px) {
/* CODE HERE */
}

    That way they only apply on desktop view, in mobile they will stack as default.

    Cheers!
    Josue

    October 23, 2015 at 10:44 am #523586
    richardelectrix

    Hi

    They didnt stack as default which is why I had to implement the code.

    This is the code I am using currently which displays everything how I want it to display with the exception of the Lost Password clashing with the Login button.

    p.lost_password {
    position: relative;
    bottom: -6px;
    left: 150px;
}

/* Remember Me */
label.inline {
    position: relative;
    bottom: -15px;
    left: 10px;
}

label[for="rememberme"] {
    position: absolute;
    bottom: 50px;
    left: 150px;
}

.woocommerce form.login {
    padding-bottom: 25px !important;
}

@media only screen and (max-width: 979px) {
.woocommerce form.login {
    padding-bottom: 0px !important;
}}

@media only screen and (max-width: 979px) {
p.lost_password {
    bottom: 18px;
    left: 10px;
    font-size: 13px;
}}

@media only screen and (max-width: 414px) {
p.lost_password {
    bottom: 18px;
    left: 10px;
    font-size: 11px;
}}

/* Remember Me */
@media only screen and (max-width: 979px) { 
label.inline {
    display: none;
    visibility: hidden;
    position: relative;
    bottom: -50px;
    left: 6px;
}}
    October 23, 2015 at 11:37 pm #524150
    Josue

    with the exception of the Lost Password clashing with the Login button

    At what screen size?

    October 24, 2015 at 2:01 pm #524230
    richardelectrix

    I think about 900px wide

    October 25, 2015 at 10:15 pm #524504
    Josue

    Hi!

    Change your 979px remember me code to this:

    
/* Remember Me */
@media only screen and (max-width: 979px) { 
label.inline {
    display: none;
    position: relative;
    bottom: auto;
    left: 6px;
}}

    Regards,
    Josue

    November 9, 2015 at 5:08 pm #532763
    richardelectrix

    Hi

    That doesnt work either.

    Now nearly all of the Login button is clashing with the Login button.

    http://screencast.com/t/pCpyRnRmN

    November 9, 2015 at 11:12 pm #532951
    Josue

    Hey!

    Have you tried playing with the z-index values of the button and the remember me checkbox?

    I’d like to help you with this but your site is down right now.

    Cheers!
    Josue

    November 10, 2015 at 8:58 am #533097
    richardelectrix

    Hi

    When you say the site is down do you mean the front end or the back end?

    Do you get any errors?

    November 10, 2015 at 11:22 am #533147
    Josue

    In the frontend:

    November 10, 2015 at 1:46 pm #533210
    richardelectrix

    Hi Josue

    Where are you viewing from?

    Thanks

    November 10, 2015 at 1:52 pm #533217
    Yigit

    Hey!

    You can see where we are located in here – http://kriesi.at/about

    Best regards,
    Yigit

    November 10, 2015 at 2:40 pm #533275
    richardelectrix

    Hi

    Please can you try to access the site again?

    Thanks

    November 10, 2015 at 3:24 pm #533330
    Josue

    Add this:

    #customer_login input.button {
    z-index: 3;
    position: relative;
}

#customer_login p.lost_password {
    z-index: 1;
}
    November 11, 2015 at 11:48 am #533929
    richardelectrix

    Perfect – thanks

    November 11, 2015 at 12:14 pm #533936
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.