Responsive Design- Html

Asked

Viewed 77 times

-4

Good afternoon! So I was in sublime-text working with Responsive Design and everything. I made the design tags all right, then activated the extension that has on Google, whose extension adjusts the screen as you want, so you can see if your site is responsive or not. I made a basic form to test the responsive and when I went to test the extension, bugged everything and the form became smaller and all bugged, even I giving F5 the form did not return the normal proportions... I’ll post the code here for you and if anyone can see what I did wrong, I’ll be very happy.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0"/> *
    <title>Responsivo</title>
    <style type="text/css">
        
    
        *{box-sizing: border-box;margin: 0; padding: 0;}

        /*Classes Auxiliares*/
        .container{
            max-width: 960px;
            margin: 0 auto;
            padding:0 30%;
        }
        .clear{
            clear: both;
        }
        .w50{
            float: right;
            width: 100%;
            padding: 0  10px;
        }
        .w100{
            float: right;
            width: 100%;
            padding: 0 10px;
        }
        /* Estilo Prórpio*/
        body{
            background-color: rgb(225,225,225);
        }
        h2{
            text-align: center;
            color: #4286f4;
            font-size: 25px;
            font-weight: bold;
            padding: 10px 0;
            font-family: cursive;
        }
        .form-group label{
            margin-bottom: 8px;
            color: black;
        }

        .form-group input {
            width: 100%;
            padding-left: 8px;
            height: 40px;
            border: 1px solid black;
            margin: 10px 0;
            cursor: pointer;
            border: 1px solid #ccc
        }




        @media screen and (max-width: 500px){
            .w50{width: 100%;}
        }



    </style>

</head>

<body>


    <div class="container"> 
<h2>Contact Us!</h2>
        
<br>
     </div>
     <div class="container"> 

        <form>
            
            <div class="w50"  >
                <div class="form-group">
                
                <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
  <input type="Button" name="Enviar" value="Enviar">
</form> 
                </div>
            </div>

        </form>
<br>


<br>
<div class="w50"  >
                <div class="form-group">
                
                    <form><form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>
<br>
<div class="w100"  >
                <div class="form-group">
                <form>
  <label for="email">Enter your email:</label>
  <input placeholder="Put your email" type="email" id="email" name="email">
<div class="clear"></div>
</form>

     </div>

</body>
</html>

html css responsive

  • You tried to use the inspect element? with the right mouse click on the page and inspect element. there is how to choose the responsive size you want, just above the site content. Put the full css code and html page, because you just put the container div down...

  • I apologize for not being able to help you in this case, but I wanted to give you a hint, don’t use px (pixels) as a unit of measure, there are others like the one in which it is much more recommended.

  • 1

    Take this 30% padding, the padding is based on the container width in this case, so you have 30% of the container width of each form’s Lada, which makes it "expressed"

  • @Rodrigogomes Yes, I inspected and everything, but it turned out to be nothing

  • @Nathanmancini Seriously? Always use px qnd I will fzr something... But I will search the other units of measures. Thanks!

  • @hugocsl aaaa yes, I get it. I’ll take a closer look at it! Thanks for your help

Show 1 more comment

1 answer

-1

This is not the right way to create a supporting structure... the right first is to create a div that fills the entire screen and adjusts the width of the screen and then a wrapper class that makes the final adjustments. Follow an example.

#header {background-color: #5c7ee6; height: 60px; float: left; margin: 0; text-align: center; width: 100%;}
.wrapper {margin: auto; max-width: 1302px; padding-left: 5%; padding-right: 5%; position: relative; text-align: left;}

In your html you do so:

<body>
    <header id="header">
        <div class="wrapper">
seu conteúdo aqui
        </div>
    </header>
</body>

vc can call the header container if the backgroud of head, content and footer are equal. If you want to put a backgroud of different colors, you can create several Ivs and customize them.... but the wrapper is one, it defines the maximum width of the whole page and the internal and external margins.

  • Man, thank you, thank you, really, I’ll test.

Browser other questions tagged html css responsive

You are not signed in. Login or sign up in order to post.