Textbox width Problem

  • Resolved Jiks

    (@jiks)


    9 years, 4 months ago

    Hello,

    Initially I had my WordPress site as a Blog displaying the latest posts. Then under “Reading Settings” I changed from “Your latest posts” to “A static page”. When doing this, I also changed all individual pages from “Default Template” to “Full-width (no sidebar)” on “Page Attributes”. As I have several forms across the site, and they deliver error messages, info’s etc., the text in those messages was aligned in a box, justified. With the change mentioned the length of the boxes containing the text is no longer justified to match the text’s size, but is always aligned at the right of each page. How can I fix this issue, for all messages in every form?

    My site: https://www.speakingoftrading.com/login

    What I want to do:

    https://docs.google.com/document/d/1fbk8GMURSAHVPrdtJlTYY3q9YUSE-tM6DRWabF6-aXA/edit?usp=sharing

    Any help would be much appreciated,

    ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • Sam

    (@soumendra)

    Hello Jiks,

    You can try this for achieving that:

    #theme-my-login .error {
    max-width: 300px;
}

    Hope that helps you, feel free to ask if there is any other problem.

    Thank you.

    Thread Starter Jiks

    (@jiks)

    Hello Sam

    Thanks again for your help!

    The code worked to fix the issue, but only in the first example. All the messages from other forms are still aligned at the right of the page. Is there a way to force the box to be justified with the text, regardless of each message and/or form across the all site?

    Thank you again. ??

    Sam

    (@soumendra)

    Hello Jiks,

    You can try this instead:

    .error {
    max-width: 300px;
}

    Hope that helps you.

    Thank you.

    Thread Starter Jiks

    (@jiks)

    Hello Sam,

    Thanks again, but the problem is still there. ?? Is this a problem with the CSS from the “Theme My Login” plugin?

    Here is the CSS code:

    .login {
    padding: 5px;
    }
    .login p.error {
    padding: 5px;
    border: 1px solid #c00;
    background-color: #ffebe8;
    color: #333;
    }
    .login p.message {
    padding: 5px;
    border: 1px solid #e6db55;
    background-color: #ffffe0;
    color: #333;
    }
    .login form label {
    display: block;
    }
    .login form p.forgetmenot label {
    display: inline;
    }
    .login input {
    margin: 5px 0;
    }
    .profile .screen-reader-text,
    .profile .screen-reader-text span {
    height: 1px;
    left: -1000em;
    overflow: hidden;
    position: absolute;
    width: 1px;
    }
    .mu_register .hint {
    font-size: 12px;
    margin-bottom: 10px;
    display: block;
    }
    .mu_register label.checkbox {
    display: inline;
    }
    #pass-strength-result {
    border-style: solid;
    border-width: 1px;
    margin: 12px 5px 5px 1px;
    padding: 3px 5px;
    text-align: center;
    width: 200px;
    }
    #pass-strength-result.strong,
    #pass-strength-result.short {
    font-weight: bold;
    }
    #pass-strength-result {
    background-color: #eee;
    border-color: #ddd !important;
    }

    #pass-strength-result.bad {
    background-color: #ffb78c;
    border-color: #ff853c !important;
    }

    #pass-strength-result.good {
    background-color: #ffec8b;
    border-color: #fc0 !important;
    }
    #pass-strength-result.short {
    background-color: #ffa0a0;
    border-color: #f04040 !important;
    }
    #pass-strength-result.strong {
    background-color: #c3ff88;
    border-color: #8dff1c !important;
    }

    Sam

    (@soumendra)

    Hello,

    Can you please provide a direct link to the page and a screenshot of where you saw those errors.

    Thank you.

    Thread Starter Jiks

    (@jiks)

    Hello Sam,

    Here is the link

    https://www.speakingoftrading.com/login/?loggedout=true

    Thanks again. ??

    Sam

    (@soumendra)

    Hello,

    You can try this in Custom CSS for the logout message:

    #theme-my-login .message {
    max-width: 300px;
}

    You can adjust the value as per your requirement.

    Thank you.

    Thread Starter Jiks

    (@jiks)

    Hi Sam ??

    Thanks again, but that won’t work as there are many different error messages and notifications.

    Sam

    (@soumendra)

    Hello,

    You can try this instead:

    .message {
    max-width: 300px;
}

    Than you.

    Thread Starter Jiks

    (@jiks)

    Thanks Sam ??

    Sam

    (@soumendra)

    Welcome. ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Textbox width Problem’ is closed to new replies.