Adding vertical space to overflowing line of text on the web page

Question

I have a line of text containing a text field and a dropdown list. On narrow screens the line overflows and the list glues to the text field. Is it possible to control the vertical spacing in the overflown line without affecting the spacing in the original non-overflown line? If I just add extra vertical space it would produce bigger spacing in both overflown and non-overflown views.

Answer 1

It's hard to see without an example, but you could try using a media query to add a style. You would change the breakpoint to equal the point where your form wraps. I used 600px for now, but yours might be different. For example, if your text field had a class .my-text-input:

@media only screen and (max-width: 600px) {
  .my-text-input {
    margin-bottom: 10px;
  }
}