I'm having a problem with flex-box

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I am trying to change the style to the button and the textarea but I have tried everything but nothing seems to work.

(This is a side thing do not feel you need to answer this part below. )
On a side note if you have any good tips you can give me like you think the site looks bad please just tell me what you think I need to do and fix the problem

Your code so far

<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="style.css">
    <title>Survey form</title>
</head>
<body>
    <header class="title">
        <title>Form</title>
        <h1>Form Survey</h1> 
        <div class="details"
    <p>Welcome to our site please enter your Name and Email</p>
    </header>
   
   <div class="container">
    <form class="form-box">
        <div class="box-email">
     <lable class="label-email"><input type="text" id="post" name="email" required/>Please enter your email</lable>
     </div> 
     <div class="box-name">
    <label class="label-name"><input type="text" id="name" name="Name"  required/>Please enter your Name</label>
    </div>
    <div class="box-textarea">
      <label class="textarea"><textarea type="text"></textarea></label>  
    </div>
<div class="submit">
<button type="submit">Submit</button>
</div>
    </form>
</div>
</body>
</html>

a {
    width: calc(50% - 2em)
  }a
   {
    width: -webkit-calc(50% - 2em);
    width: calc(50% - 2em)
  }
  a {
    width: calc(50% - 2em);
    transition: transform 1s
  }
  a {
    width: -webkit-calc(1% + 1em);
    width: calc(1% + 1em);
    -webkit-transition: -webkit-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s
   }

   /* testing to see if this helps and I think it's really helping */
   html {
     box-sizing: border-box;
   }
   *, *::before, *::after {
     box-sizing: inherit, border-box;
     
   }

   .container {
    display: flex;
    flex-direction: row;
    flex-flow: column wrap;
    /* flex-grow: 2 1 200px;
    flex-shrink: 2 1 200px; */
     justify-self: center;
     align-items: center;
     font-size: large;
     font-family:'Times New Roman', Times, serif;
    }


   body {
       background-color: teal;
       background-image: url();
       background-image: center;
   }
   


   .title {
       display: flex;
    /* border: .1rem solid; */
    border-radius: 1%;
    max-width: auto;
    min-width: auto;
    flex-flow: column wrap;
    text-align: center;
    display: flex;
     justify-self: center;
     align-items: center;
   }

   .details {
       /* border: .1rem solid; */
       display: flex;
       border-color: steelblue;
       border-radius: 100%;
       margin: 1rem 1rem 1rem 1rem;
       padding: 1rem .5rem 1rem .5rem;
       background-color: powderblue;
       color: black;
       text-align: center;
       justify-content: center;
       align-items: center;
   }

   .form-box {
    /* border: .1rem solid; */
    margin: 0rem 4rem 2rem 4rem;
    padding: 0rem 3rem 2rem 5rem ;
    justify-content: space-between;
    
    
   }

   .box-email {
     margin: .5rem;
     padding: 3rem;
     border: .1rem solid;
     background-color: aquamarine;
     
    }

   .box-name {
     padding: 3rem;
     margin: .5rem;
     border: .1rem solid;
     background-color: aquamarine;
     display: flex;
     justify-self: center;
     align-items: center;
   }

   .label-email {
    margin: 1rem 2rem  1rem 2rem;
    padding: 1rem 1rem  1rem 2rem ;
    
   }

   .label-name {
     margin: auto;
     display: flex;
     justify-self: center;
     align-items: center;
   }

   input [type-text] {
     width: 100%;
     padding: 4rem 6rem;
     margin: 2rem 0;
     box-sizing: border-box;
     border-radius: 5%; 
     display: flex;
     justify-self: center;
     align-items: center;
   }
    
    .textarea {
      border: .1rem solid;
    }

   .submit {
     display: flex;
     justify-content: center;
     align-items: center;
     /* margin: auto; */
     padding: .5rem 16rem;
     border: none;
     /* background: #333; */
     /* color: #f2f2f2;
     text-transform: uppercase;
     letter-spacing: .09em;
     border-radius: 2rem;
     flex-grow: 1; */
   }

Your browser information:

(https://codepen.io/michaelswigart/pen/rNYdrPr)

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Challenge:

Build a Survey Form

Link to the challenge:

(https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form)
2

[quote=“sherlockholmes.swiga, post:1, topic:497871”]
This the second time I have post anything here so, sorry if I still did something wrong.

I’m still not done with this and thought I would ask people that are better than me what I should do, and this is the first time I have ever done anything with flex-box so if you know anything that could help me from a front end developer please let me know.

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

4

Sorry I thought I did it right this time but thanks for fixing it.

5

If I didn’t link the codepin right just let me know.

6

Hi @sherlockholmes.swiga,

I checked your code. Let’s watch the code for the button first.

HTML part:

<div class="submit">
  <button type="submit">Submit</button>
</div>

CSS part:

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem 16rem;
  border: none;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2rem;
  flex-grow: 1;
}

Your CSS is applied for your div container, not for the button itself. If you want to apply a style for the button you need to use the selector button, or give it an id, or declare a new class for it. Depends on what you prefer.

You have a similar issue with your textarea.

<div class="box-textarea">
  <label class="textarea">
    <textarea type="text"></textarea>
  </label>  
</div>

I indented the code for that you have a visual understanding of what is happening. You applied the class textarea to the label, so the style you applied in your CSS is applied for the label tag, not the textarea.

Let me answer to answer your last wondering. :slight_smile:

What I would advice you:

  • Read your code again to see possible coding mistakes
  • You can check the website: https://validator.w3.org/. It allows you to check your HTML and debug the possible errors. You should even start by this, before reading the next :wink:
  • Watch the tags (opened and closed) into your header. There is one issue.
<header class="title">
  <title>Form</title> <!-- This should be in the `head` tag. -->
  <h1>Form Survey</h1> 
  <!-- Watch carefully your div syntax -->
  <div class="details"
    <p>Welcome to our site please enter your Name and Email</p>
</header>
  • Some of your tag syntax is wrong in form. Example:
<lable class="label-email"><input type="text" id="post" name="email" required/>Please enter your email</lable>
  • Check well your CSS, some rules look wrong, especially for the anchors.
a {
  width: calc(50% - 2em)
}

a {
  width: -webkit-calc(50% - 2em);
  width: calc(50% - 2em)
}

a {
  width: calc(50% - 2em);
  transition: transform 1s
}

a {
  width: -webkit-calc(1% + 1em);
  width: calc(1% + 1em);
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}
  • Indent well your code. It makes the reading easier, and allows to find possible mistakes easier.

I think you are still working on it so keep the hard work! And when you finish it, if you want to have feedbacks, you can go on the #project-feedback subform and create a topic. :wink:

1 Like
7

Thank you for the reply I will do these things tomorrow as it’s getting late but thank you very much!!

1 Like
8

P.s Thank you for the link for the html it is very helpful!

1 Like
9

You’re really welcome @sherlockholmes.swiga. Good luck for the projects!

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.