How to show this long input with prepend in Mobile which allows user to choose url name?

Question

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.

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.

Answer 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.

Answer 2

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.

^{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.