Horizontal registration form – mobile problem

[Boblebad]

As you can see, i have managed to hack the register form around so it can be displayed horizontally 🙂

[img]http://s25.postimg.org/3rzmciql7/Hor_Reg_Form.jpg[/img]

But as written, it’s a hack, so if you want the code, it’s your own responsibility, and you will need to fit it to your own site, but it’s not that hard 🙂

But i ran in to a problem with the mobile version as you can see here:

As you can see, the problem is the button for completion. Well, the solution can be many, one way would be to make a one-and-a-half mobile column, but i can’t set the %, it then gives me two mobile-one columns, even if i set it to 25%, as the one mobile-one column is, i get two…

Another solution could be widening the page a bit, i think 20px is needed to fit one more tw0 mobile-one columns in the registration bar.

If anyone has a suggestion, spit it out 🙂

EDIT: Wow, that was some BIG pictures 😉

Addition, as you can see with the password field, it needs a little tweeking of the padding, i can do it in FireBug, but can’t find the css that works in the files ?

All the best
Carsten

[Boblebad]

Btw: What i have done for now is that i have put the button in the column with the password fields, that’s why it shows so nice on the pc screen 🙂

[Abe]

Hi, Nice 🙂
You can address mobile devices by putting the CSS in a media query like this:

COPY CODE

@media only screen
and (max-width : 480px) {
/* Styles */
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Boblebad]

Thanks Abe 🙂

Does that mean i have to use two styles in the php, and then the right one will sort of choose itself ?

[Boblebad]

Hi again Abe

Thought about it, and found it a bit difficult, so went with some php instead.

But the button jumps of-form ?

Can’t seam to figure out what it is in the code that does this, i have only added if-else

<?php if ( wp_is_mobile() ) { ?>
<label class=”inline”></label>
<div class=”one mobile-one columns”>
<input type=”password” name=”signup_password_confirm” required=”required” placeholder=”<?php _e(“Confirm”,’kleo_framework’);?>”>
</div>

<div class=”one mobile-one columns”>
<?php do_action(‘kleo_register_form_extra’); ?>
<button class=”button radius front-form-button”><i class=”icon-user”></i>  <?php _e(“Sign Up”,’kleo_framework’);?></button>
<?php do_action(‘fb_popup_register_button_front’); ?>
</div>
<?php } else { ?>
<label class=”inline”></label>
<div class=”one mobile-one columns”>
<input type=”password” name=”signup_password_confirm” required=”required” placeholder=”<?php _e(“Confirm”,’kleo_framework’);?>”>
</div>

<?php do_action(‘kleo_register_form_extra’); ?>
<button class=”button radius front-form-button”><i class=”icon-user”></i>  <?php _e(“Sign Up”,’kleo_framework’);?></button>
<?php do_action(‘fb_popup_register_button_front’); ?>
<?php } ?>

EDIT: Sorry for using the quote tag, but using code, does weird things like cutting some of it.

[Abe]

CSS should have been your best choice using by suggestion above that overrides the default styling on desktop view

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts