2

I'm working on a responsive website where I need to inform users that information he will fill in input will be used to create url for his campaign he is going to create.

That input looks like this.

enter image description here

This is fine in Desktop but in Mobile screen with 320px screen width it's doesn't fit. What could be best possible option to convey that same information in small screen.

Note: I'm making a responsive website where I use same HTML so I can't provide a totally different HTML to mobile. I can only make changes by detecting screen size using CSS media queries.

1

I would also consider just providing an input for the user to insert their desired campaign name, and underneath it have a bound paragraph (like in Angular) displaying in a small font the complete URL, updating as the user types.

You can easily implement it with a bit of jQuery and on/keydown or have it built-in in any Javascript webapp framework.

0

Can't you break it over multiple lines at small resoultions? Treat the first (grey) section as a label, and set the input field left aligned under it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

That should be possible with just CSS, so long as you've marked up the grey box as a label element in the html and not as an input element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.