1

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.

enter image description here

Lucas Álvares
  • 238
  • 5
  • 16
apomin
  • 11
  • 1

1 Answers1

0

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;
  }
}
Jordan Rolph
  • 1,242
  • 1
  • 10
  • 14
  • I tried adding margin-bottom but it seems to insert the space after the line. Nothing happens to the overflown parts:
     
    next line     – apomin Aug 28 '21 at 22:18
  • Sorry for the messy example. It just occurred to me that the offending lists can have their own margins declarations. I will try it. – apomin Aug 28 '21 at 22:23