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;
}
