Before you ask please READ THIS

rounded password input field on mobile

in FatMoon Posts: 136
Hey Guys,
On mobile.... when clicking on a locked item at the bottom of the homepage
http://vincentdevries.com

I get a rounded input field (should be sharp corners) and Submit is not centered. see attach

Can you help me out with some custom css?

IMG_1685.PNG
750 x 1334 - 72K

Comments

  • Posts: 1,758
    Is this still happening? I can't reproduce rounded input.
    Please also write more about the device and browser you use on mobile device
    Remember to rate our theme if you like it ;)
    All the Best.
  • Posts: 136
    Not sire if I sent you the attach
    here goes

    it happens on the home page page, last work item on an iPhone 6 in safari. (not other size formats)

    IMG_1685.PNG
    750 x 1334 - 72K
  • AirAir
    edited December 2016 Posts: 10,970
    I don't know about rounded input, might be something specific to iPhone, however submit button has not enough spaces in this resolution. I will try to add some better styles for it in upcoming update.

    Maybe full width button under full width input? What do you think?

    With kind regards.
    Post edited by Air on
  • Posts: 136
    Maybe it has to do with the (messy) css I added into the css field?

    I added below to make the corners sharp and change the colors. There's probably code that doesn't need to be included?

    input[type="submit"]{
    background: #000;
    display: inline-block;
    border: none;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
    line-height: 38px;
    white-space: nowrap;
    height: 40px;
    padding: 0 30px;
    webkit-border-radius: 0px;
    border-radius: 0px;
    }
    input[type="submit"]:hover,
    input[type="submit"]:focus{
    background: #0a5de6 none;
    color: #fff;
    }
  • Posts: 136
    "Maybe full width button under full width input? What do you think?"

    I would prefer input field and button on one line
  • AirAir
    Posts: 10,970
    vncnt said: I would prefer input field and button on one line
    Maybe you are right, try such custom CSS:

    @media only screen and (max-width: 600px) {
    .post-password-form input{
    width: 50%;
    }
    .post-password-form input[type="submit"]{
    width: 49.99%;
    }
    }
    About input, it looks that it is iOS thing, I will check what can be done.

    With kind regards.
  • AirAir
    Posts: 10,970
    OK, it looks that iOS rounds corners by default and we didn't overwrite this behavior up to this day.
    Add this to fix it, or wait for update :-)

    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="range"],
    input[type="date"],
    textarea{
    -webkit-border-radius: 0;
    border-radius: 0;
    }
    With kind regards.
  • Posts: 136
    Nice work! Will insert custom css soon.

    Cheers!
  • Posts: 136
    Yes that works, thx!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!