Help with a web page in the responsive form

I need help for the correct code for the responsiveness of this page.

In the html, you can see that I have a table with two td, and in the first Td, I have a contact form.

I’ve tried to fix it, but I really don’t know much about Css.

As you can see in the photo, when you look at it reduced on the web page, as if it were a mobile, you can see that the td that is in green is out of the responsive size.

Can someone help me with this please?

I’m doing this through youtube tutorials. I am a beginner in Html and Css

Thank you

this is the HTML code;

<article class="main">
    <!----------------------------------comienza tabla------------------------>
       <div class="container"> 

  <table style="margin:0 auto;">
    <thead class="visible@l">
      <tr>
        
      </tr>
    </thead>
    
      
      <tbody>
          
      <tr>
           <td style="width:400px; background-color: palegreen;"><!-----first column---->
          <strong class="hidden@l">Title:</strong> 
        
               
               <h1> Contact Us </h1>  <!----------------contact form---------->
   <form method = "post" action = "sendmail.php" >
      <label  for = "name" > Name: </label>
      <input type = "text" name = "name" id = "name" required>
      <label for = "email" > Email: </label>
      <input type = "email" name = "email" id = "email" required>
      <label  for = "message" > Message: </label>
      <textarea name = "message" id = "message" required></textarea>
      <button type = ”submit”  class="enviar" name = ”submit”> Submit </buton>
    </form>                         <!---------------end of contact form------------>
           
          </td >   <!--------end of first column---------------------------------->
       
          
          
          <td style="width: 400px; background-color: aqua;"><!------second column------>
          <strong class="hidden@l">Year:</strong> 
          
          </td>   <!------------end for second column------------------------>
       </tr>
      
     
    </tbody>
      
  </table>
</div>
        
        <!----------------------------termina tabla------------------------->
        
    </article>

this is the Css/

<!----------------contact form------------------------->


body {
         font-family : Arial, sans-serif;
      }
      h1 {
         text-align : center;
      }
      form { margin : auto; max-width: 320px;
      }
      label { 
         display : block; margin-bottom: 10px;
      }
      
input[type = "text"],
input[type = "email"], 
textarea { padding: 10px; width: 100%; 
    border: 1px solid #ccc; 
    border-radius: 4px; box-sizing: 
        border-box; 
    margin-bottom: 20px;
      }
      submit{ 
         background-color : #4CAF50;
         color : #fff;
         padding : 10px 20px; 
          border :  none; 
          border-radius : 4px; 
          cursor : pointer;
      }
      button:hover { 
         background-color : #3e8e41;
      }


@media screen and (max-width: 600px) {
    
    form{
        
        width:70%;
        margin-left:10px;
        padding-left:5px;
     
        
    }
    .enviar{
        width:70$;
        margin-left:1px;
     
    
    }
}




<!--------------------fin de contact form----------------->



<!-------------table copy Estilos------------------->





<!---------------------fin de table copy Estilos-------------------->


<!--------------------------ENCABEZADO--------------------------->

*{
  margin>0
  padding:0
  box-sizing:border-box
  text-decoration:none}
  
  body{
  font=size:100%
  background: linear-gradient (68.15deg, blue, gray, green);
  }


  .header-menu{
    gap:32px;
    display:flex

  }
  
  .header-menu-item{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight:400;
    font-size:18px;
    
  }

  <!--------------------------FIN DE ENCABEZADO---------------------->

<!-----------------------contact page   DOS COLUMNAS--------------------->
   
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  height:auto;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
  height:auto;
}

table th,
table td {
  padding: .625em;
  text-align: center;
  height:auto;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
    display:inline-grid;
    
    
  }

   
  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  

  table tr {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: 1px;
    width:320px;
    height:auto;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display:inline-table;
    height:auto;
    font-size: .8em;
    text-align: right;
    
    
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: right;
    font-weight: bold;
    text-transform: uppercase;
    
  }
  
  table td:last-child {
    border-bottom: 0;
    
  }
}




<!-----------------fin de contact page  DOS COLUMNAS--------------------------->

  <!------------------default settings------------------------------>


.wrapper {
    display: flex;  
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center; 
  }
  
  .wrapper > * {
    padding: 10px;
    flex: 1 100%;
  }
  
  .header {
    
    background: tomato;
    display:flex;
    flex-direction:row;
    padding:24px;
    align-items:center;
    justify-content:space-around
    
    
   
 




  }
  
  .footer {
    background: lightgreen;
  }
  
  .main {
    text-align: left;
    background: deepskyblue;
  }
  
  .aside-1 {
    background: gold;
  }
  
  .aside-2 {
    background: hotpink;
  }
  
  @media all and (min-width: 600px) {
    .aside { flex: 1 0 0; }
  }
  
  @media all and (min-width: 800px) {
    .main    { flex: 3 0px; }
    .aside-1 { order: 1; } 
    .main    { order: 2; }
    .aside-2 { order: 3; }
    .footer  { order: 4; }
  }
  
  body {
    padding: 2em; 
  }

Hi there! Welcome to the SitePoint forums. :slight_smile:

Before dealing with your layout or approach, I first recommend you check your code with a validator, as there are lots of invalid bits in there.

For example, in your CSS there are things like this:

width:70$;, margin>0, font=size:100%, <! -- --> (you can’t put HTML comments in CSS)

You can’t afford to make mistakes like that. So I suggest cleaning those things up first and then seeing where you’re at.

Using HTML tables for layout isn’t good and wen’t out the door decades ago, so I also suggest learning web page layout from a more modern source. :slight_smile:

Thanks Ralph. I will review that. Thanks for your advice.

1 Like

By the way, please wrap your code blocks in three backticks at the start and end so that it formats properly. e.g:

    ```
    code here
    ```

I formatted your code and you unformatted it again when you updated your post. :stuck_out_tongue:

My honest opinion is to get a better grasp of HTML/CSS better. I created a simple Codepen that show how a basic website should look like.

https://codepen.io/Strider64/pen/gOGqrxo

In my opinion using HTML table elements is the wrong way to go for responsive design.

1 Like

Hi claudivapp, welcome to this forum and i am sure you will have great time here. Regarding this topic I would ask “why don’t you use a grid or flexbox layout, which are more flexible and responsive?”

What do you think this line of code will do when the screen is smaller than 400px?

You can’t use fixed measurements like that in a responsive site unless you explicitly control them via media queries which is not the nest way to do it. As much as possible you want the design to be fluid and adapt without media queries until absolutely necessary.

As the others have said this would be a great opportunity to get rid of the html table code and use the correct css properties to lay out that section.

Also be careful about styling everything globally as that will affect everything everywhere.

e.g.

 form { margin : auto; max-width: 320px;
      }

Do you really want every form throughout your site to have that rule? Instead add a class and style that form using the class. You make the same mistake with the table element also and style all tables and not just the one you are concerned with.

Thanks everybody. I really need is help how to do properly. because how I told , I am not expert in Css, I am beginner in this. But any way thanks for the critics.

Hey @claudivapp !! Stop being worried about critics buddy. Most of the member raising point for better version or modify them so you could do it in better way. They are not here to discourage you, not at all. You can learn from their feedback and suggestions, and apply them to your code. You can also ask them questions and clarifications if you don’t understand something.

Try this…

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add your CSS here */

/* Use a common font-size for the body */
body {
  font-family : Arial, sans-serif;
  font-size: 16px;
  background: linear-gradient (68.15deg, blue, gray, green);
}

/* Use flexbox to center the heading */
h1 {
  display: flex;
  justify-content: center;
}

/* Use relative units for the form width and margin */
form { 
  margin : auto; 
  max-width: 20em;
}

/* Use relative units for the label margin */
label { 
  display : block; 
  margin-bottom: 0.625em;
}

/* Use relative units for the input and textarea padding and margin */
input[type = "text"],
input[type = "email"], 
textarea { 
  padding: 0.625em; 
  width: 100%; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-bottom: 1.25em;
}

/* Use relative units for the submit button padding */
submit{ 
  background-color : #4CAF50;
  color : #fff;
  padding : 0.625em 1.25em; 
  border : none; 
  border-radius : 4px; 
  cursor : pointer;
}

/* Use relative units for the button hover effect */
button:hover { 
  background-color : #3e8e41;
}

/* Use a common media query for all elements that need to change on smaller screens */
@media screen and (max-width: 37.5em) {
  
    /* Use relative units for the form width and margin */
    form{
      width:70%;
      margin-left:10%;
      padding-left:5%;
    }

    /* Use relative units for the submit button width and margin */
    .enviar{
      width:70%;
      margin-left:1%;
    }

    /* Use flexbox to make the header menu responsive */
    .header-menu{
      display:flex;
      flex-wrap: wrap;
      gap:2em;
      justify-content:center;
    }

    /* Use relative units for the header menu item font size */
    .header-menu-item{
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight:400;
      font-size:1.125em;
    }

    /* Use grid to make the table responsive */
    table {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:0.5em;
    }

    /* Hide the table caption on smaller screens */
    table caption {
      display:none;
    }
    
    /* Use pseudo-elements to show the table headers on smaller screens */
    table td::before {
      content: attr(data-label);
      float:left;
      font-weight: bold;
      text-transform: uppercase;
    }
}

/* Use a common class for the wrapper elements */
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

/* Use flexbox to make the header responsive */
.header {
  display:flex;
  flex-direction:row;
  padding:24px;
  align-items:center;
  justify-content:space-around;
  background: tomato;
}

/* Use relative units for the footer background */
.footer {
  background: lightgreen;
}

/* Use relative units for the main text alignment and background */
.main {
  text-align: left;
  background: deepskyblue;
}

/* Use relative units for the aside backgrounds */
.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

/* Use a common media query for all elements that need to change on larger screens */
@media all and (min-width: 50em) {

    /* Use flexbox to make the wrapper responsive */
    .wrapper {
      display: flex;  
      flex-flow: row wrap;
      font-weight: bold;
      text-align: center; 
    }

    /* Use relative units for the aside flex-basis */
    .aside { 
      flex-basis: 20%; 
    }
}
</style>
</head>
<body>
<!-- Add your HTML here -->
</body>
</html>

Thanks Lara. I say sorry to everybody who was helping me here . Maybe I didn’t understood what the purpose in this Forum. Take care everybody

No need to apologize buddy!! We are all here to learn and help each other. This forum is a place where you can ask questions, share your knowledge, and get feedback from other programmers. You are always welcome to participate and contribute.

I hope you have a good day and keep coding. :blush:

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