How to make the adaptability of the registration form without using media requests?-CodePudding

Makeup registration form.

Faced with two problems.

Lines (pseudo-elements) near the word "registration" on narrow screens are closed on the word "registration".
The Last Name field does not go down.

This is how it looks like on wide screens (no problems):

I do not know the first problem how to solve. I tried options with min-width and max-width, but it did not help me. Perhaps I did something wrong.

The second problem is obviously solved using the flex-wrap property, but where will it be right to leave it?

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    background: #F2F3F7;
}

a {
    text-decoration: none;
    color: green;
}

.wrapper-form {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-label {
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 16px;
}

.main-text {
    font-size: 20.5px;
    margin: 22px 22px;
}

.register-form {
    display: flex;
    flex-direction: column;

    min-width: 40%;
}

.main-top {
    margin-top: 20px;
}

.main-input-container {
    display: inherit;
    justify-content: space-between;
}

.main-input {
    height: 65%;
    border-radius: 5px;
    padding: 15px;
    border-color: gainsboro;
}

.register-button {
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    background: #55AD56;
    color: white;
    border-color: #55AD56;
}

.main-label-container {
    text-align: center;  
    width: 80%;          
    margin: 0 auto;      
    overflow: hidden;    
}

.main-label-container .main-label {
    position: relative;
}

.main-label-container .main-label::before {
    content: '';                     
    display: block;                  
    min-width: 17.5%;                   
    position: absolute;              
    border-bottom: 2px solid #D0D1D5;   
    top:50%;                         
    right: 24%;                    
}

.main-label-container .main-label::after {
    content: '';
    display: block;
    min-width: 17.5%;
    position: absolute;
    border-bottom: 2px solid #D0D1D5;
    top:50%;
    left: 24%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Registration form</title>
</head>
<body>
    <main>
        <section >
            <div >
                <h1 >Register</h1>
            </div>
            <p >Create your account. It's free and only takes a minute.</p>

            <form action="#" method="get" >
                <section >
                    <input type="text" name="name"  placeholder="First Name" required>
                    <input type="text" name="surname"  placeholder="Last Name" required>
                </section>
                <input type="email" name="email"  placeholder="Email" required>
                <input type="password" name="password"  placeholder="Password" required>
                <input type="password"  placeholder="Confirm Password" required>
                <label>
                    <input type="checkbox" name="accept"  value="trueAccept">
                    I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a>.
                </label>
                <button type="submit" >Register Now</button>
            </form>
        </section>
    </main>
</body>
</html>

CodePudding user response：

One approach is as follows:

/* defining common styles as CSS custom properties for
   ease of re-use throughout the project: */

:root {
  --themeColor: #343;
  --themeAccentColor: green;
  --minWidth: 10em;
  --maxWidth: 600px;
  --fontSize: 1rem;
  --fontScale: 1;
  --gapX: 1em;
  --gapY: 0.5em;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* using CSS font shorthand to define, in order:
     font-weight, font-size, line-height, font-families;
     the CSS calc function multiplies the --fontSize property
     by the --fontScale property to produce the result for
     the font-size: */
  font: normal calc(var(--fontSize) * var(--fontScale)) / 1.5 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
  background: #F2F3F7;
}

a {
  text-decoration: none;
  color: var(--themeAccentColor);
}

main {
  color: var(--themeColor);
  display: flex;
  flex-direction: column;
  /* vertically centering the content within
     the element: */
  justify-content: center;
  /* defining the vertical spacing (top/bottom)
     using the --gapY property, and the
     horizontal spacing (left/right) using the
     --gapX property: */
  gap: var(--gapY) var(--gapX);
  /* using logical properties to define the margin
     of the block axis (top/bottom in ltr languages): */
  margin-block: 1em;
  /* using logical properties to define the margin
     of the inline axis (left/right in ltr languages): */
  margin-inline: auto;
  min-height: 100vh;
  /* using the CSS clamp function to define the minimum
     size of the element (--minWidth * 2; note that this
     _does not_ need to be wrapped in calc(), the maximum size
     (--maxWidth) and the preferred (responsive) size of
     60vw (sixy viewport-widths): */
  width: clamp(var(--minWidth) * 2, 60vw, var(--maxWidth));
}

.main-label-container {
  /* redefining the --fontScale property to give the font a
     larger size, since the <h1> is here; realistically I'd
     normally redefine on the <h1> explicitly but I chose
     not to in this instance): */
  --fontScale: 2;
  display: flex;
  /* to ensure the contents stretched across the main flex axis: */
  justify-content: stretch;
  /* vertically centering the content in the flex element's cross-axis: */
  align-content: center;
  /* note that we used 'em' as the units for these gap-properties,
     so the --gapY and --gapX will be visually larger here because
     the font of the current element is larger: */
  gap: var(--gapY) var(--gapX);
}

.main-label-container::before,
.main-label-container::after {
  content: '';
  /* to ensure the pseudo-elements grow to take the maximum possible
     space: */
  flex-grow: 1;
  /* using the currentColor keyword to set the border-color property
     to use the color of the current element: */
  border-bottom: 2px solid currentColor;
  /* moving the pseudo-elements to the vertical center of its flex
     parent element: */
  align-self: center;
}

p {
  text-align: center;
}

form {
  display: grid;
  /* we want to use a one-column grid, and to have that grid
     take all of the available space, so we use 1 fractional-
     unit to do so: */
  grid-template-columns: 1fr;
  gap: var(--gapY) var(--gapX);
}

form > section {
  display: grid;
  /* to allow the grid to adjust itself, we use the repeat() function
     with the auto-fit keyword which will fit as many grid items to
     a line as possible according to their size; to define the size of
     the grid-columns we use the minmax() function, supplying the
     --minWidth property (the minimum size the column is required to
     be) and 1fr as the maximum size: */
  grid-template-columns: repeat(auto-fit, minmax(var(--minWidth), 1fr));
  gap: var(--gapY) var(--gapX);
}

<main>
  <section >
    <div >
      <h1 >Register</h1>
    </div>
    <p >Create your account. It's free and only takes a minute.</p>

    <form action="#" method="get" >
      <section >
        <input type="text" name="name"  placeholder="First Name" required>
        <input type="text" name="surname"  placeholder="Last Name" required>
      </section>
      <input type="email" name="email"  placeholder="Email" required>
      <input type="password" name="password"  placeholder="Password" required>
      <input type="password"  placeholder="Confirm Password" required>
      <label>
        <input type="checkbox" name="accept"  value="trueAccept">
        I accept the <a href="#">Terms of Use</a> &amp; <a href="#">Privacy Policy</a>.
      </label>
      <button type="submit" >Register Now</button>
    </form>
  </section>
</main>

JS Fiddle demo.

References:

Bibliography:

"A Complete Guide to Grid," CSS-Tricks.
"CSS Grid Layout," MDN.
"A Complete Guide to Flexbox," CSS-Tricks.
"Basic concepts of flexbox," MDN.