I tried to make responsive web using max-width but im stuck please help me

user_15408227 0
Viewed 192

I'm totally new in HTML and try to make a website all is good but when I restore down the browser all the element will sepperate. Watched youtube about max-width but still not working and I'm stuck like 3 day.

This is my code for a form, the form was in a div class named bothForm and requestQuotationForm

    .requestQuotationForm{
        position: relative;
        left: 800px;
        top: -305px;        
        background: rgba(41, 29, 0,0.5);
        border-radius: 10px;
        padding: 20px;
        color: white;
        font-family: 'PT Sans', sans-serif;
        font-size: 14px;  
        max-width: 300px;
    }

    .mainBody {
        width: 1500px;
        margin : 0 auto;
    }

    @media screen and (max-width: 500px) {
        .mainBody {
            width: 95%;
        }
        .bothForm {
            max-width: 100%;
        }    
    }
<div class = "requestQuotationForm">
               
            <form>
              
                <p class="requestQuotationText"><center>Request quotation </center></p>
                <label for = "ICNumber">IC Number</label>
                <input type="text" onfocus="this.value=''" id= "ICNumber" name="ICNumber" value = "Enter your IC number"> <br> <br>
                
                <label for = "FlatNumber">Plate Number</label>
                <input type="text" onfocus="this.value=''" id= "FlatNumber" name="FlatNumber" value = "Enter your plate number"> <br> <br>
                
                <label for = "carModel">Plate Number</label>
                <input type="text" onfocus="this.value=''" id= "carModel" name="carModel" value = "Enter your car model"> <br> <br>
                
                <label for ="chooseInsurance">Choose insurance</label>
                <select class ="chooseInsurance">
                <option value = "Etiqa">Etiqa</option>
                <option value = "Ikhlas">Ikhlas</option>
                <option value = "AXA">AXA</option>
                </select>
                
                <label for = "PhoneNumber">Phone Number</label>
                <input type="text" onfocus="this.value=''" id= "PhoneNumber" name="PhoneNumber" value = "Enter your phone number"> <br> <br>
            
                <input type="button" value="Submit" id="RequestQuotationButton"  > 
            </form>
                
        </div>

css html
2 Answers

You are using absolute values with px thus your form gets pushed off the screen/window when it's small. You can use something like this:

.requestQuotationForm{
   position: relative;
   left: 30%;
   top: 10%;        
   background: rgba(41, 29, 0,0.5);
   border-radius: 1em;
   padding: 2em;
   color: white;
   font-family: 'PT Sans', sans-serif;
   font-size: 1em;  
   width: 40%;
}

Read more on this here: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

user_146637930

I've made an example with responsive blocks (similar to forms from your website). You can check it out by running Code Snippet -> Full Page and try resizing the window.

Hope this is what you are looking for.

I have used CSS Flex technology to achieve responsiveness + @media max-width queries (to change title font-size and form width)

.requestRoadtaxPrice { 
        background: green;
        height: 300px;
    }
  
    .requestQuotationForm {
        background: red;
        height: 600px;
    }
    
    .form {
        margin: 20px;
        width: 350px;
    }

    .mainBody {
        width: 100%;
        margin: 0 auto;
    }
    
    .form_container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .title {
        text-align: center;
        font-size: 40px;
    }
    
    @media screen and (max-width: 900px) {
        .title {
            font-size: 30px;
        }
        .form {
            width: 300px;
        }
    }
    
    @media screen and (max-width: 700px) {
        .form {
            width: 400px;
        }
    }
<div class="mainBody">
    <h2 class="title">Welcome to Agency Abu Hanifah Webpage!</h2>
    <div class="form_container">
        <div class="requestRoadtaxPrice form">
            <form></form>   
        </div>
        <div class="requestQuotationForm form">
            <form></form>   
        </div>
    </div>
</div>

user_154127390
Related