Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Styling a Form - How to put a aria-describedby on a separate line rather than the same line as the form using css

I want my aria-describedby to go onto a separate line in my media query rather than displaying it on the same line as my form. Does anyone know how to do this, or does it usually go to the right of the form and I do not need to worry about it? My form layout is styled with flexbox.

I have tried the :before and :after for the #name-format id but might be approaching this wrong. I have also tried:

span {display: block}

If anyone knows how to approach this your help would be appreciated.

Sample HTML

<form action="" method="post">

    <fieldset input style="border:none" >
        <legend>Contact-information</legend>

        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" value="" placeholder="Required" pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
            <span id="name-format" class="help">Format: first name last name</span>
        </div>

1 Answer

Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points
Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points

Hi. You could add <br> tag after input, it will move any inline object to the new line

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you for your help. The br tag didn't work here, I think because it is in the html tag rather than it's own paragraph / header. If anyone knows how to target this specifically I would like to learn how. Thank you.