I am newbie with HTML CSS and trying to write a very simple program with HTML CSS with responsive file and here is my problem.
I wrote an index.html file and in this file, I added two classes like this
<div class="row contact-content">
<div class="col col-half contact-info s-col-full">
<p><i class="ti-location-pin"></i>Chicago, US</p>
<p><i class="ti-mobile"></i>Phone: +00 151515</p>
<p><i class="ti-email"></i>Email: [email protected]</p>
</div>
<div class="col col-half contact-form s-col-full">
<form action="">
<div class="row">
<div class="col col-half">
<input type="text" name="" placeholder="Name" required id="" class="form-control">
</div>
<div class="col col-half">
<input type="email" name="" placeholder="Email" required id="" class="form-control">
</div>
</div>
<div class="row mt-8">
<div class="col col-full">
<input type="text" name="" placeholder="Message" required id="" class="form-control">
</div>
</div>
<input class="btn pull-right mt-16" type="submit" value="Send">
</form>
</div>
</div>
As you can see in my code, in the class, I want the class Chicago, US v.v will take up 100% the screen, and the row Name Email v.v will take up 100% the screen too because I add the code
.s-col-full {
width: 100%;
}
to the responsive.
But, it does not happen.
Here is what I got in the screen, as you can see, the Chicago US is lying next to Name, Email, Message.
But, as design, it must lie up the Name, Email, Message (because s-col-full is width: 100% in responsive)
Here is my code, sorry because I can not upload to bitbucket.
https://www.mediafire.com/folder/kfuqch81jqkwk/bai_90
Could you please give me some advice for this problem ? Thank you very much for your time.